Hey guys,
Context:
currently I am trying to build a header navigation like the one on webflow.com. There you can see a few nav items that are links and some that have dropdown elements for submenus/mega menus.
When you click a dropdown toggle, it opens the mega menu and at the same time the page overlay. Clicking anywhere outside the mega menu except links and other toggles it closes the menu and the page overlay. Clicking on another toggle keeps the overlay open, closes the previous menu and opens the new one.
The problem:
I built something similar. You click on the toggle which then opens overlay and menu. You click on the overlay or the header, the menu and overlay close.
For this I needed to use custom code but I’d rather use the built in interactions. When using them however, I can’t get it to work properly. Problem is the first/second click topic. Clicking the toggle the first time opens the menu. Then clicking outside on the overlay, closes it. Now the next click to open it again is the second click on the toggle and therefore it tries to close it and you need to click again to reopen it.
Another problem is that I want to click anywhere in the header to close the menu too. Since the toggle is a child of the header, it triggers 2 animations at the same time: Open and Close.
This is my goal:
What I would need is that clicking a toggle first closes all open menus, then opens the new one. At the same time the overlay needs to be visible as long as there are menus open. A click on the overlay needs to close all menus and reset the click events on the menu toggles. Clicks on the header should also close all open menus and reset the click events. If I click on a menu item, the logo or a button, the default behavior should take place and the close animation should be ignored.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
