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