Keep submenu expanded when parent or children are active

Question

I have a two-tiered menu system using the Nice menus module, which I've adapted to run horizontally with the children beneath the top level, as in the following menu.

Home - About - Adopt an animal - Events - Get Involved - Contact

Cats - Dogs - Small Animals - Birds

At the moment, the second tier is showing only on hover of the parent. After clicking through or landing on a page I need the children to be expanded when their parent or siblings are active and I'd like the parent to be highlighted as active in this case too - so in this example if I'm on Adopt an animal page or dogs / small animals / birds then I need that expanded.

I'm not sure where to even start on this, I don't really want to hack it by duplicating false second tier menus and using context or block to display them on certain pages because I need to be able to hand over the menu administration so the integrity is important. Thanks for any suggestions.

Answer 1

Menu Trail By Path sets the active-trail on menu items according to the current url.

For example if you are at yoursite.com/blog/category1/article1 Menu Items with these paths will get the active-trail class on them and expand accordingly.

blog
blog/category1
blog/category1/article1

This is particularly useful if you want a lot of nodes to appear as children of certain nodes / taxonomy term / views / referenced nodes / etc, but do not want to add them all to the menu. eg. hundreds of blog articles.