浙江 杭州

炫酷Bootstrap下拉菜单鼠标滑过动画特效

系统分类: 网页特效 - jquery插件 - jQuery树形菜单 2016-09-22

人气27248

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款基于Bootstrap的炫酷下拉菜单鼠标滑过动画特效jQuery插件。该插件在鼠标滑过Bootstrap dropdown组件的时候,下拉面板会以指定的CSS3动画出现。目前支持的CSS3动画是Daniel Eden的Animate.css中的slideDown、fadeIn、fadeInDown、fadeInUp、flipInX五种效果。该jQuery插件的特点有:

  • 利用Bootstrap的原生事件
  • 保持键盘可访问性
  • 压缩版本小于1.5kb
  • 可以配置鼠标滑出的延迟时间
  • 响应式设计
  • CSS3下拉菜单动画

安装

可以通过bower来按钮该下拉菜单鼠标滑过动画特效插件。

bower install bootstrap-dropdown-on-hover                
              

使用方法

在页面中引入jQuery和bootstrap-dropdown-on-hover.min.js文件。

<script src="jquery.min.js"></script>
<script src="js/bootstrap-dropdown-on-hover.min.js"></script>                 
              
HTML结构

该下拉菜单的结构是标准的Bootstrap的下拉菜单结构。要激活动画效果,需要在下拉菜单<ul>元素中添加class animated,同时在data-animation中指定animate.css的CSS3动画名称。

<ul id="menu" class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" data-toggle="dropdown">Menu Item <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
        </ul>
    </li>
</ul>                
              
初始化插件

在页面加载完毕之后,通过下面的方法来初始化该jQuery插件。

<script>
  jQuery(function($) {
    $("#menu").bootstrapDropdownOnHover();
  });
</script>                
              

配置参数

该下拉菜单的默认配置参数如下:

$("#demo").bootstrapDropdownOnHover({

  // Number of milliseconds to wait before closing the menu on mouseleave
  mouseOutDelay: 500,

  // Pixel width where the menus should no-longer be activated by hover
  responsiveThreshold: 992,

  // Whether to remove the menu backdrop upon hover 
  hideBackdrop: true
  
});                
              
参数 默认值 描述
mouseOutDelay 500 在鼠标离开下拉菜单之后多少时间才关闭下拉面板,单位毫秒
responsiveThreshold 992 在屏幕宽度为多少像素的时候不再激活下拉菜单鼠标滑过动画效果
hideBackdrop true 十分隐藏下拉菜单的背景(mobile中有效)

查看演示
下载资源:7
下载资源
错误提交:

格式:zip 大小:67.58KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1884.html 非特殊说明,本文版权归原作者所有,转载请注明出处
炫酷Bootstrap下拉菜单鼠标滑过动画特效

我当前G币余额:0 已下载次数:7

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有2 评论)