基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件

metisMenu是一款基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件。该下拉列表插件在原生bootstrap下拉列表的基础上进行了美化，使其支持多级下拉菜单、列表树和鼠标滑过展开等特效。

安装

可以通过Bower和nmp来安装该下拉菜单插件：

bower install bootstrap-offcanvas   
npm install metismenu             
              

使用方法

metisMenu下拉列表插件支持cdnjs 和 jsdelivr的CDN加速。

引入Twitter Bootstrap样式文件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"/>              
              

引入 metisMenu 下拉列表样式文件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.3/metisMenu.min.css"/>              
              

引入jQuery、Twitter Bootstrap和metisMenu的js文件

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.3/metisMenu.min.js"></script>         
              

调用插件

$("#menu").metisMenu();               
              

配置参数

• toggle：是否支持自动展开和收缩。类型：boolean，默认值：true。

  $("#menu").metisMenu({
      toggle: false
    });                  
                  

• doubleTapToGo：是否支持双倍间隙。类型：boolean，默认值：false。

  $("#menu").metisMenu({
      doubleTapToGo: true
    });