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!