Fork me on GitHub

Hoverify Bootnav 1.0.0

Improve your nav's design (Jquery plugin)
Animated menu

Documentation

How to install

Step 1: link required files


	




If you want to use easing, dont forget to add it like this one !

Step 2: Create html (bootstrap nav)


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


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)

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):


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;
}