Mega menu problems

Hey anyone,

i am working on a mega menu for a dropdown (not a topbar).

This is my approach:

If an user hovers an menu item i check if it has a certain class to show the mega menu (not all items have an mega menu).

$(document).on('show.zf.dropdownmenu', function(e, elmnt) // event fires if a dropdown is shown

If the elmnt parent (the menu item that is hovered) has a specific class i set show() on an extra element which is positioned right at the menu item.

on hide.zf.dropdownmenu i set hide() for this element.

This is already working.

But the show.zf.dropdownmenu event fires too soon. I understand why this is happening (because my mega menu is not recognized by foundation as an dropdown menu)…

But do you have an idea on how to solve this witch foundation tools (instead of creating my own workaround)?

I think of something like registering the element as menu or expanding the sensible area…

Thanks in advance!

You can catch the event (mouseenter) and call stopPropagation, preventDefault and stopImediatePropagation as the show event is triggered after changing the markup.

See https://github.com/foundation/foundation-sites/blob/0f9fea524fec599999fdd952d55de94635f75227/js/foundation.dropdownMenu.js#L327 and https://github.com/foundation/foundation-sites/blob/0f9fea524fec599999fdd952d55de94635f75227/js/foundation.dropdownMenu.js#L145

Hi DanielRuf,
thank you!
showing the mega-menu is actually working at the moment.
The difficulty is to hide the menu again at the right moment (like if another dropdown menu is selected or if the mouse leaves the menu)

Check the linked lines and see if you can register the event listeners before the listeners from Foundation Sites to catch the event earlier eg by registering them before $(document).foundation().

Here is my code:

The mega menu is bound to the closing event of the native dropdownMenu.

I did a few experiments with setting a “menuHovered” flag and check at the close event if this flag exists but this doesn’t seem to be reliable…

This is another (working) idea but it is non valid HTML code…

Edit: it actually seems to be valid HTML to put <div> inside <li>
therefore this might be a solution.

Thank you very much for this solution!!! :wave:

Here is a simple mega menu using a menu and dropdown…