I was feeling the same frustration about this issue and had to find a way to make this happen. This effect can be achieved through custom animation, no code required! You must create your own custom dropdown with the use of the div block structure I will show and the animations that go with each one.
DropdownWrapperDivBlock (Put Everything in This Div)
animation: hover on (Show DropdownListDivBlock display: block)
animation: hover out (Hide DropdownListDivBlock display: none)
DropdownToggleDivBlock (Add text for the dropdown button itself here)
DropdownListDivBlock (This div holds your clickable links that dropdown)
display: show none
DropdownLink1 (Put these inside DropdownListDivBlock) DropdownLink2
animation: onClick hide DropdownListDivBlock
class: should be the same for each link block - copy and paste once you develop the first animation
It’s a bit complicated, but definitely works.
Hopefully this creates the intended functionality everyone is looking for.
What’s going on with this one? My Google search showed an original post about this topic from 2014. I use Barba.js with Webflow since Webflow doesn’t support SPA smooth style routing where layout animations occur on elements that persist through the navigation.
That works great, but then if I use a Drop Down component for navigation, the menu stays open after navigation instead of closing, and I’ve found no working solution to problematically close the menu via custom code). Of course, I can create a custom component that can do most of this, but then I lose auto-close on mouse out, plus half the fiddle with the styles to show and hide the menu with making edits instead of just clicking the convenient “Open Menu” button that is available on the Drop Down component.
I’m so impressed with Webflow, but things like this make me wonder if you guys are stuck on a legacy stack or something? I have to escape hatch so often that the convenience and UX of Webflow are diminished.
Thing like this, and not being able to send different forms to different people make me wonder if a giant overhaul in the works or something. There is so much powered to be gained by creating an actual API for developers, leveraging more modern techniques like SPA/PJAX routing animations, better theming support, custom CMS views (drag images in a grid view to reorder, anyone?), the list goes on. Sounds exciting, let’s hope so.
which is the first way I managed to avoid the two clicks needed to re-open
Edit: this.$element is just a reference to the top level element of the dropdown as a jQuery element. If you have more than one drop down on a page, this needs to run for each dropdown with the correct reference.
A solution that actually works!! (for me at least) without custom code! I think it will only work if all your section links are on one page.
First: The problem causing the dropdown to not disappear is having external links that are actually section links (with the hashtag etc). If your link goes to a completely different page, the page will reload without the dropdown, the dropdown only stays if you are referencing a section on the same page, but through an external link.
My situation is that I have a navbar that I turned into a symbol so that it will be the same on every page. The items in it are section links which have to be external so they work from pages that do not include the section links. The navbar not disappearing is a result (BUG) from having section links entered as external links, BUT the navbar disappears perfectly if the links are page sections, not external links. SO. You keep the links as external links in the navbar used across the pages not including the section links. Then duplicate and create a different navbar only on the page with section links and just set the links as section links not external links.
Wow, this deep into it and Webflow has no integrated solution. How sad. @benlorimore, thank you for this post. Does exactly what I need it too. Just not cool that I had to ruin my Nav symbol over it. Either way, I was able to accomplish what I needed.