这是一款基于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中有效)