How to animate a dropdown menu using CSS3 animations?

animate.css, css, zurb-foundation

Solution

I got it working in an example. I used the HTML you provided, and then downloaded the `bounceInDown` animation and used that for the CSS in the examples below.

jsFiddle example here - hover method

jQuery

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){
    $("ul").removeClass('animated bounceInDown');
  });
});

If you want to add a delay when hovering off, use something like this:

jsFiddle example - hover method with delay.

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){setTimeout(function(){
    $("ul").removeClass('animated bounceInDown');
  }, 750);});
});

Those examples are assuming you want the animation fired on hover. If you want it fired on click, use something like this instead:

jsFiddle example click method - Look below for an alternative non-JS method.

$(document).ready(function(){
  $('a').click(function() {
    $("ul").toggleClass('animated bounceInDown');
  });
});

Alternative method - No JS/jQuery

If you don't want to use JavaScript/jQuery, you can use the checkbox hack in CSS.

This essentially toggles between `:checked`, thus activating the animation.

jsFiddle example - It works in all current browsers.

HTML

<label id="click" for="dropdown">Click here</label>
<input style="display:none" type="checkbox" id="dropdown">
<ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content>
    <li>Facebook</li>
    <li>Email</li>
</ul>

CSS - (only part of it) See the example above for full CSS.

input[type=checkbox]:checked ~ #dropdownalerts {
    display:inline-block;
    -webkit-animation: bounceInDown 1s both;
    -moz-animation: bounceInDown 1s both;
    -o-animation: bounceInDown 1s both;
    animation: bounceInDown 1s both;
}

Problem

I would like to add a CSS3 effect to my dropdown. (Just like that one in Instagram.com on "My profile"). I'm using Animate.css for the CSS3 effects. I tried this, but it doesn't work. HTML ``` <a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a> <ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content> <li><%=link_to "Facebook", "#"%></li> <li><%=link_to "Email", "#" %></li> </ul> ``` JS ``` $(document).ready(function(){ $('a').hover(function(){ $("ul").addClass('animated bounceInDown'); }); }); ``` You can find a live version on Zapping.io

Original source