Question

Please do not flag this as a duplicate, I’m not asking about what is better to use. I made a slideout navbar the other day, and I used the jQuery slideToggle() to get the animation working. I tried using CSS transitions, but I failed miserably. The question is, is it possible to get that effect with transitions (exactly the effect on the JSfiddle) without jQuery (or any JS at all, for that matter)? If so, how?

Answer 1

Yes it’s possibile (here’s an example: http://jsfiddle.net/DvVLw/3/) e.g. if your items height are set initially to 0 and you specify, for every submenu, an exact height to reach at the end of the animation, since CSS3 animations cannot (yet) work with auto keyword (so an animation from 0 to auto is not possible).

The height of course is hard to tell when your menu is dynamic and you don’t previously know how many items it will contain