Dropdown Transition

Design help General
1

How to create a dropdown transition (animation) effect?

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

Regars,
Marcelo

2

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

3

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.

4

Thanks Vincent, i’m still trying here

5

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?

https://preview.webflow.com/preview/conferenceworksv2?preview=45dddcbd08d23c8f5c52e22e35eaa9f2

6

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

7

Sure. This is the one.

758×644 163 KB

8

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:

2840×1110 1.29 MB

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

9

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

https://preview.webflow.com/preview/conferenceworksv3?preview=af5128a5a6dd88d1a414a96aa2f60db4

10

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

11

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.

12

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
    suggestions?

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

13

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,
Dave

14

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

https://preview.webflow.com/preview/conferenceworksv5?preview=94f5afd7245acc4d0cf06044ea3ccc2e

Cheers

Mark

15

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 !
Aldo