Beautiful jQuery Drop Down Menu Plugin For Bootstrap - Dropdown on Hover

File Size: 9.04KB
Views Total: 31395
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Beautiful jQuery Drop Down Menu Plugin For Bootstrap - Dropdown on Hover

Dropdown on Hover is a lightweight and easy-to-use jQuery plugin that Integrates with Twitter's Bootstrap to create stunning and user-friendly drop down menus on hover.

Basic Usage:

1. Include jQuery library and jQuery Dropdown on Hover on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="twitter-bootstrap-hover-dropdown.js"></script> 

2. Include Twitter Bootstrap files on the page

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

3. The html

<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">1000ms Delay <b class="caret"></b></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Why Would</a></li>
<li><a tabindex="-1" href="#">A Home Tab</a></li>
<li><a tabindex="-1" href="#">Have Dropdowns?</a></li>
</ul>
</div>
</div>

4. Call the plugin and done

<script>
$(document).ready(function() {
$('.js-activated').dropdownHover().dropdown();
});
</script>

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