hoverifyBootnav

jQuery hoverfiyBootnav

Use this simple bootstrap addon to add a nice effect on nav's hover.

How to install

Step 1: link required files

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">	
<link rel="stylesheet" href="../hoverifyBootnav.css">
<!-- JS -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../hoverifyBootnav.js"></script>

If you want to use easing, dont forget to add it like this one: https://jqueryui.com/easing/

Step 2: Create html (bootstrap nav)

<ul class="nav nav-tabs nav-stacked">
  <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>
  <li role="presentation" ><a href="#">Commands & account</a></li>
</ul>

If you don't have a li.active, hbn will not work.

Step 3: Call Hoverify Bootnav

Using JS

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

Using data attribute (HTML)

Add data-hbn to call Hoverify Bootnav

<ul class="nav nav-tabs nav-stacked" data-hbn="">
  <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>
  <li role="presentation" ><a href="#">Commands & account</a></li>
</ul>

Options

duration_effect_on    , 	//400
duration_effect_off   , 	//1000
easing_effect_on      , 	//null
easing_effect_off     , 	//null
effect_mouse_hover    ,     //classic or teleportation
effect_mouse_out      ,     //classic or teleportation
background_color      , 	//null
color                 , 	//null
//Function
my_effect_mouse_hover ,     //null
my_effect_mouse_out   ,     //null

Using options with data attribute (HTML)

 <ul class="nav nav-tabs" data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000, "background_color" : "red"}'>
    <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>
    <li role="presentation"><a href="#">Commands & account</a></li>
</ul>

Customize effects

You can set your own function on mouse hover & mouse out

$('ul.nav.do-hbn').hoverifyBootnav({
    'duration_effect_on' : 400,
    'duration_effect_off' : 1000,
    'my_effect_mouse_hover': function(){ //do what you want },
    'my_effect_mouse_out': function(){ //do what you want }
});

And more

If you call Hoverify Bootnav on many nav like this

$('ul.nav.do-hbn').hoverifyBootnav({
    'duration_effect_on' : 400,
    'duration_effect_off' : 1000,
    'easing_effect_on' : 'easeOutElastic',
    'easing_effect_off' : 'easeOutBack',
    'background_color' : 'black',
    'color' : 'red'
});

And if you want to overwrite an option for one particular nav, use data attribute! Like this (overwrite background-color):

<ul class="nav nav-tabs nav-stacked" data-hbn-background-color="green">	
  <li role="presentation" class="active"><a href="#">..</a></li>
  <li role="presentation"><a href="#">..</a></li>
</ul>

Change design

You want to set your own style? Use the selector .hoverboot-pill, like this

.hoverboot-pill{
    background-color: none;
    border-bottom: 2px solid #337ab7;
}

Licence

WTFPL - Do What The Fuck You Want To Public License.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004

Copyright (C) 2004 Sam Hocevar [e-mail]

Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

You just DO WHAT THE FUCK YOU WANT TO.