页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery+bootstrap改进动画视觉效果导航插件hoverify-bootnav

菜单导航 BootStrap HTML我帮您 1年前  次浏览
JQuery.hoverify-bootnav是一款Bootstrap改进动画视觉效果导航插件。该插件在Bootstrap导航菜单的基础上,当鼠标滑过导航菜单项时,可以制作出非常炫酷的遮罩层滑动效果。
jquery+bootstrap改进动画视觉效果导航插件hoverify-bootnav

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

    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    
    <link rel="stylesheet" href="/hoverify-bootnav.css">
    <!-- JS -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/hoverifyBootnav.js"></script>

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

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

Customize effects

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


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

 

相关链接

发表评论