Hello,
I’m fairly new to Squiz Matrix and was wondering, if a site design has a top menu and I want to add the ability for sections of a website to have a secondary left menu, what is the best way to achieve this in the design parse file? I.e. Do I still have a single parse file with both menus and provide a way for the secondary menu to be enabled and configured to start at a particular root node?
Thanks
M
Pretty much, most common way is to set it to present at a certain asset depth level, so for example, only show on level 2 items and below.
Check out this page of the manuals for more information https://matrix.squiz.net/manuals/designs/chapters/menu-normal-design-area#Create-Sub-Menus
The requirement is to only show on certain sections of the site, such as an annual report. Would this be done via a design customisation or a Show If Design Area? Or neither?
You could do this via metadata. Have it set to no, then the option to turn the second nav on.
We create the secondary nav like normal, but set it not to print.
Then further down:
<MySource_AREA id_name="layout" design_area="show_if">
<MySource_SET name="condition" value="keyword_regexp" />
<MySource_SET name="condition_keyword" value="asset_metadata_Page.Template.Settings" />
<MySource_SET name="condition_keyword_match" value="lhs_page" />
<MySource_THEN>
<div class="grid">
<div class="grid--25">
<MySource_PRINT id_name="nav_secondary" />
</div>
<div class="grid--75">
<MySource_PRINT id_name="body" />
</div>
</div>
</MySource_THEN>
<MySource_ELSE>
<MySource_PRINT id_name="body" />
</MySource_ELSE>
</MySource_AREA>
This way it will only print depending on the metadata field.
Great. I got it to conditionally display using this method.
The next thing I am trying to do is dynamically set the root node for the menu, but this doesn’t appear to be possible in the design area according to this post: Dynamic root node value in menu normal design area
How have you configured the root node?
I think you’ll need to switch from a Design Area to a nested Asset Listing Page to do that.
Interestingly it seems that even Squiz staff don’t use Design Areas to implement menus anymore. All the recent navigation UI I’ve seen recently has been done with either Asset Listings or SSJS.
@Bart, is there any advice on whether there are still compelling reasons to use Design Areas for navigation?
Well, Menu Design areas handle things like active and hierarchy state classes really nicely. They also actually print a bit faster if you are doing something like a multi-level menu, and they are quicker and easier to set up rather than creating an asset listing with the right configurations.
So, it depends on your use case, most of the time I’d use a menu design area, but if you need something basic outside of the context of your main design menu, for example, tabs inside a PL applied to a section of your site, the asset listing /SSJS approach might be simpler.
I’ve currently got it working by setting print=“no” on the design area and then using a design customisation to set print to yes and set the root node for the menu. Time will tell if this is the best solution I guess. Thanks for the advice.
There’s one thing I’m struggling to solve. If I have:
-First level 1
-First level 2
– Second level 1
– Second level 2
— Third level 1
-First level 3
My second level items do not get the “has-children” class added to them unless I am on “First level 2”. i.e. The class is missing from “Second level 2” if I’m on “First level 1” or “First level 3”. I’ve tried removing the design customisation and re-applying it as described in Menu settings attribute not working but that didn’t work. Any help would be much appreciated.
Design markup:
<MySource_AREA id_name="left_menu" design_area="menu_normal" print="no">
<MySource_SET name="level" value="top" />
<MySource_SET name="show_subs" value="always" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="selected" />
<MySource_SET name="settings.class.hierarchy" value="hier" />
<MySource_SET name="settings.class.has_children" value="has-children" />
<div id="leftMenu">
<nav role="complementary">
<ul>
<MySource_ASSET>
<li class="<MySource_PRINT var='settings.class' /> first-level">
<a href="<MySource_PRINT var='asset_url' />">
<MySource_PRINT var="asset_short_name" />
<i class="fa menu-toggle" aria-expanded="false" aria-controls="#" data-target="#" data-toggle="collapse"></i>
</a>
<MySource_SUB design_area="menu_normal">
<MySource_SET name="show_subs" value="always" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="selected" />
<MySource_SET name="settings.class.hierarchy" value="hier" />
<MySource_SET name="settings.class.has_children" value="has-children" />
<ul id="subMenu<MySource_PRINT var='assetid' />" class="collapse">
<MySource_ASSET>
<li class="<MySource_PRINT var='settings.class' /> second-level">
<a href="<MySource_PRINT var='asset_url' />">
<MySource_PRINT var="asset_short_name" />
<i class="fa menu-toggle" aria-expanded="false" aria-controls="#" data-target="#" data-toggle="collapse"></i>
</a>
<MySource_SUB design_area="menu_normal">
<MySource_SET name="show_subs" value="always" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="selected" />
<MySource_SET name="settings.class.hierarchy" value="hier" />
<MySource_SET name="settings.class.has_children" value="has-children" />
<ul id="subMenu<MySource_PRINT var='assetid' />" class="collapse">
<MySource_ASSET>
<li class="<MySource_PRINT var='settings.class' /> third-level">
<a href="<MySource_PRINT var='asset_url' />">
<MySource_PRINT var="asset_short_name" />
</a>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
</nav>
</div>
</MySource_AREA>I just tested this as well in the latest version and it definitely looks like a bug.
Looks like it only works for one level down from where you are currently at.
I have lodged a bug report to try and get this fixed up in a future release.
Thanks for confirming Bart. For now I have added some jQuery to add the required class:
$.each($("#leftMenu ul li.second-level ul"), function () {
$(this).parent().addClass("has-children");
});