I need a css class on parent items that will allow me to style the parent item whenever its child items are open, including when the parent item is not active, and when there's no hover state on the child items. For example, if I am on the front page and I hover over the "About Us" level-one parent item, its background changes to green and its child items (second-level menu block) open. I'd like the parent item to stay green when I move the cursor off the parent item and onto the child menu block, whether to hover over a child item or not.

Is there anyway to put a class on the parent item of open child items that doesn't depend on hover or active states?

Comments

danielhonrade’s picture

danielhonrade commented

If you're using menu block, there's a checkbox in the config that says make the menu active when the submenus are active, this will cause the top level menu to have active-trail class when the menu block iten is open or active.

drupalusering’s picture

drupalusering commented

Is it possible to have an active class while .om-content is open on parent element? I am able to add css for :hover state for parent, but it won't remain active as soon as mouse leaves it and hover over .om-content

drupalusering’s picture

drupalusering commented
Status: Active » Needs review

adding this to om_maximenu.js

$('.om-maximenu-content').hover(function () {
    $(this).parent().toggleClass('active-parent-li');
});
danielhonrade’s picture

danielhonrade commented

I think, it should be addClass instead of toggleClass, then add another function for leaving the content to remove the class

c3info’s picture

c3info commented 
 $('.om-maximenu-content').hover(
  function () {
    $(this).parent().addClass('active-parent-li');
  },
   function () {
    $(this).parent().removeClass('active-parent-li');
  }
  );
FrancoisL’s picture

FrancoisL commented

Hello Daniel,

this seems to not working. I ticked the checkbox and no class appeared in the code. I'm on 6x version.

The java script is working but goes on the li. Is there a solution to add the class in the a href as it is in this web site? http://www.activelivingresearch.org/

Thanks

François

Morasta’s picture

Morasta commented
Issue summary: View changes

Used #5 with the current version of om-maximenu and it did the job nicely. The solution described in #1 didn't work with views blocks in my case.