XF 1.5 Need help with my custom menu.

I need some help with this off canvas menu that I am trying to edit to fully replace my regular nav bar which I have hidden. This is to make the website look a bit nicer on mobile devices.

Here is what is happening. Currently I have to click a parent menu item to expand it and show the sub menu. I want to make it so that it will do it on a hover, and not on a click. And that's easy to do, but what I NEED is for the hover to stay open until I hover over another menu item.

If I hover over a menu item and then then the expanded one will close.

You can see how this menu behaves now go to www.myrebellion.org and click the menu button at the top.

Here is the code that controls the menu. (Note: Yes this code is super ugly, and no I didn't write it :cautious:)

Code:
  //open (or close) submenu items in the lateral menu. Close all the other open submenu items.
    $('.item-has-children').children('a').on('click', function(event){
        event.preventDefault();
        $(this).toggleClass('submenu-open').next('.sub-menu').slideToggle(200).end().parent('.item-has-children').siblings('.item-has-children').children('a').removeClass('submenu-open').next('.sub-menu').slideUp(200);
    });

As a last resort if what I want can't be accomplished I would appreciate it if someone would tell me how I can make it so that all the menu just open on load and stay that way.

Any help would be awesome!

Thanks!
 
Last edited:
Top Bottom