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

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

发布时间:2018/07/04 来源:互联网 浏览: 关键词:jquery 菜单导航 bootstrap twitter 
基于Twitter Bootstrap 3的炫酷jQuery下拉列表插件 基于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样式文件

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

引入 metisMenu 下拉列表样式文件

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

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

<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<scriptsrc="//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
      });     

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top