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

这是一款基于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
  
});