CODEWITHSUNDEEP
csscss-transitions
user1365010
user1365010

Reputation: 3363

Dropdown menu with transition

After a long time coding in javascript, I wanted to try doing a beautiful website without any javascript (and without jQuery of course). I wanted to do a dropdown menu with tabs like this website : dropdown tabs . But this one is in javascript. I did that : http://jsfiddle.net/jHeRm/. But when I added the transition, I had a problem : the transition is from a point to another, and I can't know the begining point without calculations (height of a li * the number of li).

How can I do this transition in any way, but without jQuery, javascript, php, IDs and classes?

EDIT : I thought of a way to do it by making the transition from bottom:0px to top:21px but the transition always start from top:0px to top:21px

Upvotes: 2

Views: 2228

Answers (1)

Alex
Alex

Reputation: 35417

You could use CSS and animate the height of the nested ul:

http://jsfiddle.net/jHeRm/2/

Below is an updated version using negative margins:

http://jsfiddle.net/jHeRm/4/

Upvotes: 2

Related Questions