jQuery Plugin For Animated Bootstrap Nav Component - hoverfiyBootnav

hoverfiyBootnav is a jQuery plugin that adds nice, customizable visual effects to Bootstrap's Navs (tabs, pills, etc) when hovering.

How to use it:

1. Include the jQuery hoverfiyBootnav plugin after jQuery library, into your Bootstrap project.

<link rel="stylesheet" href="hoverifyBootnav.css">
<script src="hoverifyBootnav.js"></script>

2. Include the jQuery easing plugin for more easing effects (OPTIONAL).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Just call the function on the Bootstrap navs and we're done.

$(function(){
  $('ul.nav').hoverifyBootnav();
});

4. Config the visual effect using data-hbn-options attribute.

<ul class="nav nav-pills" data-hbn-options="{OPTIONS HERE}">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

5. You can also pass the options as an object during init.

$(function(){
  $('ul.nav').hoverifyBootnav({
    duration_effect_on : 200,
    duration_effect_off : 500,
    easing_effect_on : null,
    easing_effect_off : null,
    effect_mouse_hover: 'classic',
    effect_mouse_out: 'classic',
    background_color : null,
    color : null,
    //functions
    my_effect_mouse_hover : null,
    my_effect_mouse_out : null
  });
});

---

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