[Solved] Adding A Transition To Drop Down On Hover?

[MBM]

I want to add a transition to my drop down menus something like this :

-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

I have added this in all elements of the menu but it won’t fire.

http://codepen.io/MBM/pen/xBogD

[Paulie_D]

You can’t transition display:none if that’s what you mean.

Try this.

http://www.greywyvern.com/?post=337

http://codepen.io/Paulie-D/pen/ea82be4c865048ea9ac7c65b6abef7de

The Jquery is just there to add classes but its not doing the transition.

[MBM]

If I remove display:none; the links collapse. I’ve added more elements and updated the pen.

[Paulie_D]

Did you read the article?…I don’t see the properties it suggests in the updated fiddle.

As you can see from my linked Codepen…it does work.

[Paulie_D]

Here’s a fork of your pen that’s a little more specific in it’s selectors for you to adapt.

http://codepen.io/Paulie-D/pen/Bnujx

[MBM]

The drop down elements are supposed to be hidden and only display on hover. I’ve changed the pen to show how it displays normally. I’m not sure how to maintain the drop down on hover without display:none;.

[Paulie_D]

I repeat…did you read the article I linked…it explains how to use visibility and opacity to achieve what you want?

http://www.greywyvern.com/?post=337

I even provided a Codepen in which I demonstrated the concept.

http://codepen.io/Paulie-D/pen/ea82be4c865048ea9ac7c65b6abef7de

I’m not going to write it for you.

[MBM]

The structure is different to the one I use. I can get the transitions to display but when hovering between links, the links are shown in horizontal blocks before re-aligning vertically. I’ve updated the pen.

[Paulie_D]

This is the problem

-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;

On’y transition the properties you need and apply delays to stagger them as required.

THAT was the point of the article….try re-reading it.

The structure is irrelevant it’s the transition CSS you should be paying attention to.

[MBM]

Thanks. I’ll play around with the transitions.

[Author]

Posts