JQuery slideToggle() vs CSS animations

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?

Answers


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


Sure is, but using this method you will have to play around with the top position initially (it is negative)

Important parts

#nav li ul {
    position: absolute;
    margin-left: -1px;
    list-style: none;
    padding: 0;
    top: -245px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

#nav li:hover ul {
    visibility: visible;
    display:block;
    top: 45px;
    z-index:-999; /* This is to make the menu be behind the nav bar*/
}

#nav li ul:hover {
    display: block;
}

Demo

Also check this out for a simplified version of the slide effect.


Instead using height 0 and auto why not to use CSS transform:translateY() with transition: transform ?

Is there any disadvantages of using that solution?


Need Your Help

using preventDefault() with on() in jQuery AJAX tabs

javascript ajax jquery-ui tabs preventdefault

I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CS...

How to set up Consul hosted zone on Route53?

dns amazon-route53 consul bind9

I am trying to set up Route53 so that instances on the same VPC as the consul cluster can hit .consul endpoints.