TL;DR: how do I keep this “custom” hover menu open when the mouse moves away from the trigger?
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:
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
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:
- 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).
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).