Has-children in a menu

(Charlotte Westney) #1

Hi everyone,

 

A common problem but I can't seem to see a solution.

 

A new design for one of our sites has been delivered with a 'has-children' class on menu items that have children.

 

I tried putting in a show-if area with condition 'has_children'. I put the area outside of the menu_normal area and set to print no, then printed it within the menu_normal.

But its acting on the page that you are viewing, not the page being output in the menu. So if you are viewing a page with children, all pages in the menu show 'has-children'.

I also tried putting the show if within the menu_normal area, but Matrix didn't like that.

 

So, how can I get my menu items to show whether they have children or not? This must come up all the time, and re-coding all the js and css that has been paid for to a third-party design company is really not a good option for us.

 

Thanks for any advice! Charlie

 

 

(Bart Banda) #2

Hey Charlie,

It has come up a few times before and we are working on a new feature for the menu design area to support it in https://squizmap.squiz.net/matrix/9283 Due out soon in 5.3. 

 

In the meantime, depending on what your design looks like, if you are able to show the children of menu items always and just show them with CSS/JS on hover, you could potentially use a CSS trick where you have a pseudo class on the child <ul> element that adds an icon to the parent <li> area.

 

Something like:

li{
  position relative;
}
li > ul:before{
  content: 'arrow';
  position: absolute;
  top: 0;
  left: 0;
  etc....
}

That way, any <li> elements that have <ul> children underneath them will have some additional CSS markup added. But may not work with your cutup/design requirements. 

(Charlotte Westney) #3

Hi Bart,

 

Great that this is being worked on, looking forward to seeing it in a future release!

 

I think I'll have to go back to the design company and get them to work it, their menu has a lot of js going on to open up child areas and add the has-parent toggle, so hopefully they can get the js to work out this bit too!

 

Thanks,

Charlie.