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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!