0

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

Vincent Manera
  • 113
  • 2
  • 6

3 Answers3

1

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.

Community
  • 1
  • 1
Dave S.
  • 63
  • 6
0

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.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
0

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.

508Ninja
  • 95
  • 2
  • Thanks for that, this was a good starting point. I shifted the following code from the _mouseOverHandler and moved it to the _mouseDownHandler: `$(event.target) .addClass(this.settings.hoverClass); _togglePanel.call(this, event);` I also added a bit of hackey jquery to disable the anchor tags of the headings so it doesn't redirect me off the page. `$('li.accessible-megamenu-top-nav-item h2 a').bind('click',false);` I'm now looking to have a second click on the menu close it however my gut feeling is that this is going to be a bit more complicated. – Vincent Manera Jun 05 '14 at 03:14
  • Please accept it as an answer if it helped you resolve your situation to larger extent. It will help future readers. – 508Ninja Jun 07 '14 at 03:54