Loads of people seem to be asking (including me) how to animate a dropdown menu properly, and even better with IX2. With a few different posts I’ve found how to do it so thought I’d put it in a single one here.
It’s a little bit fiddly, but I’ve done a video below which shows you how to do it.
Don’t forget to select the actual dropdown wrapper so you can choose dropdown and NOT dropdown toggle on the interaction panel.
Make sure you choose overflow: hidden on the dropdown list (so when the list closes it hides the links as well)
When you create the animation above can you reuse it on other dropdown menus within the same site? Or do you need to recreate the animation for each and every dropdown menu?
Under the “Category” folder click on the first (or any) of the category pages. Along the left you will see several dropdown menus that make up an accordion menu. The first link “Nordic Naturals Retail Products” works perfectly. However, I can’t get the other links and menus to animate using the same interaction. Even if I copy and paste the menu the animation still doesn’t work. I’m stumped!
I applied the same interaction/animation to the “Synflex” link. Can someone please take a look and tell me why I can’t get the other menus to animate in the same way? I’ve spent hours on this and I can’t get the other menus to work.
I’d REALLY appreciate someone helping me out with this.
Site is looking great. Sorry for the delay, I know how frustrating it can be waiting for an answer!
I’ve had a play and figured what you need to do. I’m not the best at typing to explain, so done a video. It’s unlisted video so can’t be found without this link.
Great to know. Thanks so much! And yes when you have to click a dropdown on desktop it feels cheap to me. I prefer hover. But definitely not a problem on mobile!
But I can not figure out how to make hover work! To me it looks like the checkbox in the dropdown-settings “open menu on hover”, simply does not work.
I had to work around by first making the dropdown visible and then hiding it again via IX2-default… took me some time to figure that out!
I don’t think there is a bug, as I have just this morning recreated this button again for a different site. Without your read-only link it’s difficult to say what this could be, but could be conflicting interactions or states.
If you’d like me to take a look, then please share your read only link and I’ll gladly take a look for you.
Sorry to open this topic again after so many months but I’m having the same issue as @Bghead8che. Ive set up the dropdown menu as per your original video and everything worked great. When I copied and pasted the dropdown menu to create another dropdown on my site the animation only works on one of them.
I tried to follow your second video tutorial but I’m not getting the same options come up in the interactions panel to replace the element? Not sure if it’s something I’m doing wrong or if that option has been removed from Webflow now?
Thanks @new_work_city… I’ve managed to get it working now using the in-build dropdown component and following the guides that @magicmark posted a while back.
Now I’ve run into another problem because the animation only works on one dropdown menu… i have x3 in my nav bar and would like the animation to work on all of them.
Great job on the site, just one little thing is to choose which class it will affect, and it should only affect children of this class…
Heres a quick video for you:
@new_work_city the tutorial already uses the native dropdown, it’s a way of getting it to animate smoothly on hover or click using IX 2.0 and making it more custom.
Awesome. Thanks.
