jQuery hoverfiyBootnav

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

How to install

Step 1: link required files

<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><linkrel="stylesheet" href="../hoverifyBootnav.css"><!-- JS --><scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script><scripttype="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)

<ulclass="nav nav-tabs nav-stacked"><lirole="presentation" class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li><lirole="presentation" ><ahref="#">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

<ulclass="nav nav-tabs nav-stacked" data-hbn=""><lirole="presentation" class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li><lirole="presentation" ><ahref="#">Commands & account</a></li></ul>

Options

duration_effect_on,//400duration_effect_off,//1000easing_effect_on,//nulleasing_effect_off,//nulleffect_mouse_hover,//classic or teleportationeffect_mouse_out,//classic or teleportationbackground_color,//nullcolor,//null//Functionmy_effect_mouse_hover,//nullmy_effect_mouse_out,//null

Using options with data attribute (HTML)

<ulclass="nav nav-tabs" data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000, "background_color" : "red"}'><lirole="presentation" class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li><lirole="presentation"><ahref="#">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):

<ulclass="nav nav-tabs nav-stacked" data-hbn-background-color="green"><lirole="presentation" class="active"><ahref="#">..</a></li><lirole="presentation"><ahref="#">..</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 sam@hocevar.net

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.