菜单导航-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。

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31