Fork me on GitHub

Hoverify Bootnav 1.0.0

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


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, hbn will not work.

Step 3: Call Hoverify Bootnav

Using JS
Using data attribute (HTML)

Add data-hbn to call Hoverify Bootnav


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

	'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

	'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

	background-color: none;
	border-bottom: 2px solid #337ab7;