Drop Down Toggle Interactions - with a bug?

Design help Animations & Interactions
1

HI All!

I’m facing a strange problem. I have built a mega nav for a clients site. All toggles (nav buttons) have the same class and share the same interactions (drop down open / drop down close). When hovering they open and close. So far so good.

It worked fine until I added another toggle (nav button) for a search field. This time I gave the trigger a combo class so I can style it differently (with an icon).

I added the same interactions since they should not actually be disturbed by a combo class, no? All works fine but if you now only once hover over the nav button (on the right) its drop down list stays – invisible but you can hover it and make it appear again. All this even thought that in the interaction the dropdown list is set to “hide” in the end and also has an initial state “hide”.

Why does the adding of the search toggle messed it all up?

Would be great if you could help me out.

Thanks,

Patrick

Here is my public share link: https://preview.webflow.com/preview/cnylaw?utm_source=cnylaw&preview=c3920d2939bd783d98cff26891b2e726&mode=preview

2

Don’t name your search button “dropdown 2”. Otherwise every ix that affects that class will fire once you hover the search nav. You can simply duplicate it and the problem will go away. Sort of like this.

Oh and you can set the hover out interaction for your nav to be faster - 0.2 s will do. Currently sometimes you can hover out and then hover back quickly and the nav is not yet removed with hide interaction so it appears out of nowhere.

3

Perfect. Thanks @dram also for the extra tipp with the 0.2 s. Now all works smooth.

best, Patrick

1 Like