TL;DR: how do I keep this “custom” hover menu open when the mouse moves away from the trigger?
My Public Live Site: My Public Link
My Read-Only Preview: My Preview link
Webflow’s Public Live Site: Webflow’s Public Link
Webflow’s Read-Only Preview: Webflow’s Preview link
What’s happening in my site: dropdown shrinks when mouse moves down
What I want to happen: (dropdown stays open when mouse moves down)
I’ve created the “foundation” of the Meganav using Webflow.com’s method:
Hovering over nav_menu triggers nav_inner to extend its height below, creating a canvas for menu items; then, hover out shrinks the height back to normal. But…this means, when the mouse moves below the trigger into the dropdown, the menu will close. How does Webflow.com keep nav_inner open, even after the user has moved their mouse away from the nav_menu trigger?
Webflow.com actually uses the same “Hover Out” which retracts nav_inner when you hover out of the trigger. But somehow…their menu only closes when the mouse leaves the dropdown canvas; my menu closes immediately leaving the trigger. And, they’ve not set any interactions on nav_inner, the dropdown itself, which is a bit befuddling.
What I’ve tried so far:
- Reading 20+ topics who ask almost this exact same question. Unfortunately, a lot of preview links are dead so I can’t see what exactly people were trying or what worked. Still, none seem to use the elegant Webflow solution of extending down the parent element (and using absolute positioning to keep the menu at the top)…subsequently, they seem to use margin magic in a way and/or JavaScript).
- Watching every interaction video in Webflow University. My next step is attempting to add an interaction to
nav_inneronly in its opened state…somehow.- Tried the built-in dropdown component, but it seems quite difficult to make a Meganav out of it and almost impossible with the neat left/right swiping animations that Webflow.com uses.
- Triple-checking whether Webflow used any margins or weird positioning or extra, overlapping interactions. There could be some, but I can’t find them (but I could also be looking in the wrong place).
Is Webflow.com just JavaScript trickery and I’m barking down the wrong tree and/or forest? I realize my skills are quite weak, but I want to make this a learning opportunity.
P.S. Why am I trying to re-create Webflow.com’s Meganav?
- I love the animations as you move left/right between menu items. After a lot of learning, I’ve figured out that animation (each time you open a menu, it shifts the other two
nav_innerelements 20px left and/or right accordingly. Then when you open those other two menus, the shifted dropdowns flow back to 0px, making a gentle swipe effect).
-
This menu will likely be the hardest part of the website, so I want to get this out of the way.
-
I like the large navigation buttons, which allow for an icon + text + large click target. And, when the time comes, it feels really functional on mobile, too (don’t kill me; I know how broken mobile is now; I’m open to all tips for mobile breakpoints).
