jQuery Plugin To Add CSS3 Animations To Bootstrap Dropdowns

A lightweight jQuery plugin that adds amazing CSS3 on hover animations to Bootstrap dropdown components.

Basic Usage:

1. Include the jQuery javascript library together with Boostrap 3 framework and jQuery Bootstrap Dropdown On Hover plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="src/bootstrap-dropdown-on-hover.js"></script>

2. Include the animate.css for CSS3 animations.

<link href="animate.css" type="text/css" rel="stylesheet" />

3. Create a dropdown navigation using Bootstrap 3 dropdown component. Set the CSS3 animations for each menu using animate.css rules.

<ul id="demo" class="nav navbar-nav">
  <li><a href="#">Navbar</a></li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown">flipInX <b class="caret"></b></a>
    <ul class="dropdown-menu animated flipInX">
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
    </ul>
  </li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown">fadeIn <b class="caret"></b></a>
    <ul class="dropdown-menu animated fadeIn">
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
    </ul>
  </li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown">fadeInUp <b class="caret"></b></a>
    <ul class="dropdown-menu animated fadeInUp">
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
    </ul>
  </li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown">fadeInDown <b class="caret"></b></a>
    <ul class="dropdown-menu animated fadeInDown">
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
    </ul>
  </li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown">slideDown <b class="caret"></b></a>
    <ul class="dropdown-menu animated slideDown">
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
    </ul>
  </li>
</ul>

4. Call the plugin to enable the CSS3 on hover animations.

$("#demo").bootstrapDropdownOnHover();

5. Some options to set the animation behaviors.

$("#demo").bootstrapDropdownOnHover({
mouseOutDelay: 500, // Number of milliseconds to wait before closing the menu on mouseleave
responsiveThreshold: 992, // Pixel width where the menus should no-longer be activated by hover
hideBackdrop: true // Whether to remove the menu backdrop upon hover (mobile only)
});

---

This awesome jQuery plugin is developed by millerbennett. For more Advanced Usages, please check the demo page or visit the official website.