Bootstrap导航菜单动画视觉增强jQuery插件

JQuery.hoverify-bootnav是一款Bootstrap导航菜单动画视觉增强jQuery插件。该插件在Bootstrap导航菜单的基础上，当鼠标滑过导航菜单项时，可以制作出非常炫酷的遮罩层滑动效果。

使用方法

使用该导航菜单插件需要中引入bootstrap相关文件，以及hoverifyBootnav.css和hoverifyBootnav.js文件。如果你需要其它的easing效果，还要在页面中添加jquery.easing.js文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/hoverifyBootnav.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/hoverifyBootnav.js"></script>                 
                

HTML结构

使用bootstrap原生的nav导航菜单的HTML结构：

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

初始化插件

在页面DOM原生加载完毕之后，可以通过hoverifyBootnav()方法来初始化该导航菜单插件。

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

HTML中使用data属性

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

配置参数

可用的配置参数如下：

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
                

也可以在HTML代码中通过data属性来设置参数：

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

自定义动画

你可以设置自己的鼠标进入和离开是的回调函数：

$('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 }
});                  
                

也可以自定义easing效果：

$('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'
});                  
                

如果你需要单独设置某个nav的效果，可以：

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

你可以通过.hoverboot-pill来设置自己的遮罩层效果。

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

JQuery.hoverify-bootnav导航菜单插件的github地址为：https://github.com/tghpow/JQuery.hoverify-bootnav。