Streaming live at 10am (PST)

Here is how to animate a dropdown menu with IX2


#1

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)


Animate dropdown open
Click Interaction to Show/Hide content
#2

Great, thanks for sharing :+1:


#3

Thanks for showing this - I see what you mean about being a bit fiddly to do, but great example


#4

It was probably just me making it look even fiddlier than it needed to be! :joy:


#5

Good one @markos84uk! Thank you very much. I was fiddling around with this dang thing for days :blush: Awesome. Thanks.


#6

Nice one @markos84uk! Thanks for sharing man!

:v:


#7

Markos (or anyone else),

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?

Please take a look at my site:

https://preview.webflow.com/preview/omega-direct?preview=2bc1fef112a830aa85b295af6ea7fe00

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.

Thanks!

-Brian


#8

Hi @Bghead8che ,

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.

Let me know how you get on! :smile:


#9

Really cool man thank you! Does it work for Hover state too?


#10

Yes, works on hover too. I make sure all of mine show on hover on all of my sites.

You can’t use hover on mobiles and tablets though, for this you need to use the force, Luke.

:grin:


#11

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!

I Appreciate the tip! :call_me_hand:t3: