当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:下拉菜单 菜单导航 bootstrap 动画效果 
炫酷Bootstrap下拉菜单鼠标滑过动画特效 炫酷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文件。

<scriptsrc="jquery.min.js"></script>
<scriptsrc="js/bootstrap-dropdown-on-hover.min.js"></script>   

HTML结构

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

<ulid="menu"class="nav navbar-nav">
    <liclass="dropdown">
        <ahref="#"data-toggle="dropdown">Menu Item <bclass="caret"></b></a>
        <ulclass="dropdown-menu">
            <li><ahref="#">First</a></li>
            <li><ahref="#">Second</a></li>
            <li><ahref="#">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中有效)

共有人阅读,期待你的评论!评论
Top