jQuery Plugin For Adding Hover Functionality To Bootstrap Dropdowns

A jQuery plugin that utilizes Bootstrap's native events to make Bootstrap Dropdowns work with hover instead of click. It also allows you to add awesome CSS3 powered open / close animations to dropdowns using Animate.css.

How to use it:

1. Include the bootstrap-dropdown-on-hover.js script in your Bootstrap project.

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

2. Create a Bootstrap dropdown. Add the class animated to the dropdown element and use data-animation to specify the animation type. Reference to https://github.com/daneden/animate.css for full animations.

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

3. Call the function to enable the plugin.

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

4. Plugin's default options

$("#demo").bootstrapDropdownOnHover({

  // Number of milliseconds to wait before closing the menu on mouseleave
  mouseOutDelay: 500,

  // Pixel width where the menus should no-longer be activated by hover
  responsiveThreshold: 992,

  // Whether to remove the menu backdrop upon hover 
  hideBackdrop: true
  
});

---

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