Dropdown Transition

How to create a dropdown transition (animation) effect?

Other thing, can i edit the css directly? Would be helpfull.


You can add CSS to the HEAD section of the Custom Code tab in your site dashboard. You have to publish to see the effect though.

On this page you have an eased dropdown http://sab.webflow.com/menus/menu-in-dropdown-menu

You can duplicate the site or click on the green button to analyse it.

On the dropdown list, there is an interaction:

so it starts with opacity 0 and then a dropdown trigger is added

After that it’s pretty much self explaining

If you want your menu to slide down, make it move up in the initial appearance state, then move to origin on the dropdown open step, and back where it was on close.

Thanks Vincent, i’m still trying here

I’m trying to do a similar thing with a dropdown menu, but it doesn’t seem to be working. Could it be because I’m using percentages?


Hi @Marxamus, could you please post a screenshot of the dropdown on your site that is giving you the issue? I checked your site, but I am not looking in right place, cannot see any dropdown :wink: cheers, Dave

Sure. This is the one.

Hi @Marxamus, can you also please let me know where in the navigator this drop-down is ? I still cannot find it for some reason:

I am standing by for your response :slight_smile: Thanks !

I’m sorry, @cyberdave. I sent you the old link. Here’s the updated one; now featuring a dropdown. :wink:


Hi @Marxamus, I made a quick video, does this help?

If not, let me know and I am happy to assist further :slight_smile: Cheers, Dave

That’s perfect! I still need to finesse those last couple of things—margins and z-index—as you mentioned, but thanks so much for your help, @cyberdave. Really appreciate the effort, even for such a small thing.

I have the dropdown working smoothly now, thanks @cyberdave, but I’m still having a couple of issues:

  1. The close interaction doesn’t seem to have any effect, the dropdown
    menu just vanishes.
  2. I’ve set the z-index of the navbar to be above
    the dropdown list, but it stil appears over the top of it. Any

Here’s a link to the current version: https://preview.webflow.com/preview/conferenceworksv4?preview=ac6882b3982287526c719b47a6f5f362

Hi @Marxamus, thanks for the update, sorry for the late reply :-/ I opened the preview link, but I could not see the dropdown, can you recheck if I am looking at the correct site, or maybe you have that dropdown removed now? Cheers,

Hi @cyberdave. Yeah, it had been removed (client request), but I’ve put it back in now for you to take a look.




Hi @cyberdave, many thanks for your very nice video, which helped me to create the movement transition, but as Marxamus my only concern is that the Dropdown list is always on top of the navbar, no matter how I change the z-index of the dropdown list. I may have missed something, but I don’t know where.
Here is my preview : https://preview.webflow.com/preview/ikkyu?preview=78147b1ac6d3c51e514ca155e40c9dac
The desired effect would be something like this : https://nishi.momofuku.com/
I know this post is quite old but haven’t found the solution on other topics.
Many thanks for your help !