Alter mega menu to trigger on click instead of on hover

Question

I would like to use Adobe's Accessible Mega menu that they provide on github. However this mega menu triggers on hover instead of on click and I don't see any simple way to change this within the javascript.

Other than this one issue I believe this implementation of a mega menu is perfect for my requirements. Is anyone who a whiz at jquery able to point me in the right direction. Any help or reccomendations will be appreciated.

The mega menu can be found here: http://adobe-accessibility.github.io/Accessible-Mega-Menu/ & jquery file is: http://adobe-accessibility.github.io/Accessible-Mega-Menu/js/jquery-accessibleMegaMenu.js

Answer 1

I did a quick review of "jquery-accessibleMegaMenu.js" so my answer may be premature. Inside this java-script Look for definition of two functions: _mouseOverHandler and _mouseOuthandler. These functions handle the display of menu on cursor hover. Comment the code inside these functions. Don't comment the entire functions themselves, it might have other repercussions.

Also tests if the hover events on the child menu items are handled through these functions. If so you might have to modify these events to allow hover effect on child menus.

Answer 2

I had a similar issue with a basic setup. My top level items did not link anywhere and I only had one level deep.

In jquery-accessibleMegaMenu.js line 631-657-ish there are two functions. _mouseDownHandler... and _mouseOverHandler...

I took the _togglePanel.call(this.event); out of the mouseOverHandler function and put it in the _mouseDownHandler function.

As noted by Vincent Manera there is probably more to it if there are child items that rely on a hover state as a 'click' might navigate away.

Answer 3

You should change the hover events to click events in the script.

Search for .on in the source code. The first parameter of this function is the event. mouseover is hovering, mouseout is when your hover event ends (mouse leaves the element). I would try replacing mouseover with mousedown and removing mouseout, but I have never used this lib.