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
  });