Streaming live at 10am (PST)

Here is how to animate a dropdown menu with IX2

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)

20 Likes

Great, thanks for sharing :+1:

1 Like

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

1 Like

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

1 Like

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

1 Like

Nice one @magicmark! Thanks for sharing man!

:v:

1 Like

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

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:

5 Likes

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

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:

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:

1 Like

Dear Markos, thanks a lot for showing as a Video!

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! :smiley:

Is it maybe a webflow-bug??

Hi @berot3

You’re welcome, glad it was useful :smiley:

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.

Spot on… works on hover as well but fiddling all right…
Would NEVER have figured it out by myself so thank you…

1 Like

Hi magicmark,

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?

Here’s the link to my WIP file if you need to have a look at the set up: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=58ffba1c8f6200794c15b513fd9a8d7f

Thanks in advance
Dan

Hi All,

I’ve just followed the ‘Custom Dropdown Menu’ tutorial on the University and have set it up to trigger on hover.

The problem I’m having is when I hover away from the trigger area the menu closes and I can’t select any of the links in the dropdown.

Is there a way of stopping this from happening and closing the menu when I hover away from the dropdown section instead?

A link to my site is below.

Kind Regards
Dan

Here is my public share link: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=58ffba1c8f6200794c15b513fd9a8d7f

Hi @rosedani

I’d suggest you use the Dropdown Component from the Add Elements tab. It is designed for this.

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.

Link to my WIP file just in case you know of a solution: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=58ffba1c8f6200794c15b513fd9a8d7f

Kind Regards
Dan

Hi @rosedani, :wave:

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:
CloudApp

@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.

Happy designing! :slight_smile:

Spot on @magicmark, that worked perfectly!

Thanks for the feedback and speedy response!

1 Like