Submenu Design Area - settings.classes options

(Tim Davison) #1

Looking at the manuals' it looks like there are 3 options for menu and submenu class settings, which I'm implementing in the parse file like this:

<MySource_SET name="settings.class.normal" value="menu-item" />
<MySource_SET name="settings.class.current" value="menu-item current" />
<MySource_SET name="settings.class.hierarchy" value="menu-item expanded" />

So far so good.

 

In the design of this site I'm doing right now they want a different styling for 'current' item if it has children in the menu.  I'm kinda stuck on this, as I need to print out the name of the 'current' asset.  It's like I need to back-trace and say if there's children of 'current' then do this, otherwise do that.  

 

Ideally there would be another class setting available called 'has-subs' or something like that, but that's not an option.

 

Has anyone else had this issue, and how did you solve it?

(Tim Davison) #2

Ok, actually think I got a solution using CSS.  My menus are rendering like this:

<!-- if current has subs -->
<li class="menu-item current">
  <a href="xxx">asset name</a>
  <ul>
    <li class="menu-item">...</li>
    ...
  </ul>
</li>

<!-- if current does not have subs -->

<li class=“menu-item current”>

<a href=“xxx”>asset name</a>

</li>

So, I target using CSS, just assume all '.current > a' have subs and style them appropriately.  Then target the one's that don't have subs using the rule '.current > a:last-child' and set all the styles back to how they were.  This works because if there are no subs then no list gets rendered, and so the 'a' element will be the last one.  

 

One major problem I'm having with this approach is what seems to be a bug in in our version of Matrix for this instance (yeah - it's v4.12.4, so very old).  What's happening is if there are no children then the submenu design area is all good.  But if there *are* children *but* none of the children fit the requirements (i.e. all children are either TYPE2 or unwanted asset types) then an empty list is generated, like so:

<!-- incorrect HTML generated by SUB design area -->
<li class="menu-item current">
  <a href="xxx">asset name</a>
  <ul> </ul>
</li>

So, I think that's a bug in our version of Matrix, but it's making my CSS solution to the original problem not work since most of our pages have thumbnails which we've put under the page.  If you have a later version of Matrix without this issue then the CSS solution should work for you.