metisMenu侧边栏插件
班宏毅
介绍
metisMenu是一个jQuery的导航栏插件，使用该插件可以定义导航栏的二级甚至三级导航菜单，并能实现菜单的折叠和展开等操作，将节省我们的开发时间，提高开发效率。
引入方式：
- npm
$ npm install --save metismenu
- yarn
$ yarn add metismenu
- 直接引入
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> // bootstrap样式
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> // 图标使用font-awesome
<link rel="stylesheet" href="vendor/metisMenu/metisMenu.css"> // 插件样式
<script src="vendor/jquery/jquery.js"></script> // 基于jquery实现
<script src="vendor/bootstrap/js/bootstrap.min.js"></script> // 使用bootstrap的collapse插件
<script src="vendor/metisMenu/metisMenu.min.js"></script> // 插件代码
调用方式：
<script type="text/javascript">
$(function() {
$('#side-menu').metisMenu(); // ul.nav#side-menu
})
</script>
常用方法：
-
$('#side-menu').metisMenu({ toggle: true, });：For auto collapse support. -
$("#metismenu").metisMenu('dispose');：For stop and destroy metisMenu. -
$("#menu").metisMenu({ preventDefault: false });：Prevents or allows dropdowns’ onclick events after expanding/collapsing. -
$("#metismenu").metisMenu({ triggerElement: '.nav-link' // bootstrap 4 });：自定义触发元素的jQuery选择器，默认为a标签 -
$("#metismenu").metisMenu({ parentTrigger: '.nav-item' // bootstrap 4 });：自定义触发元素的父元素的jQuery选择器，默认为li标签 -
$("#metismenu").metisMenu({ subMenu: '.nav.flex-column' // bootstrap 4 });：自定义子菜单元素的jQuery选择器，默认为ul标签
常用事件：
show.metisMenu：调用显示实例方法时，此事件立即激发。shown.metisMenu：当用户看到折叠ul元素时（将等待CSS转换完成），会触发此事件。hide.metisMenu：调用隐藏方法后立即触发此事件。hidden.metisMenu：当用户隐藏了折叠ul元素（将等待CSS转换完成）时，会触发此事件。
完整示例：
<style>
@media (min-width: 768px) {
.sidebar {position: absolute;width: 250px;margin-top: 51px;z-index: 2;}
}
.sidebar .sidebar-search {padding: 15px;}
.sidebar ul li a.active {background-color: #eee;}
.sidebar ul li {background: #f8f8f8;border-bottom: #e7e7e7 1px solid;}
.nav-second-level li {border-bottom: 0 !important;}
.nav-second-level li a {padding-left: 38px;}
</style>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<a href=""><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="">Flot Charts</a>
</li>
<li>
<a href="">Morris.js Charts</a>
</li>
</ul>
</li>
<li>
<a href=""><i class="fa fa-table fa-fw"></i> Tables</a>
</li>
<li>
<a href=""><i class="fa fa-edit fa-fw"></i> Forms</a>
</li>
<li>
<a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="">Panels and Wells</a>
</li>
<li>
<a href="">Buttons</a>
</li>
<li>
<a href="">Notifications</a>
</li>
<li>
<a href="">Typography</a>
</li>
<li>
<a href=""> Icons</a>
</li>
<li>
<a href="">Grid</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Third Level <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="active">
<a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a class="active" href="#">Blank Page</a>
</li>
<li>
<a href="#">Login Page</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(function() {
$('#side-menu').metisMenu(); // ul.nav#side-menu
})
</script>
树形图：
- nav.navbar.navbar-default //导航栏
- div.nav-collapse //容器
- ul.nav#side-menu //总列表
- li //一级菜单，无展开
- a
- i.fa.fa-table.fa-fw
- li //带二级菜单
- a
- i.fa.fa.table.fa.fw
- ul.nav.nav-second-level
- li
- a
- li.active //激活状态
- a
- i.fa.fa.table.fa.fw
- ul.nav.nav-second-level
- li
- a.active
- li //带三级菜单，
- a
- i.fa.fa.table.fa.fw
- ul.nav.nav-second-level
- li
- a
- ul
- li
- a
官方介绍地址：https://mm.onokumus.com/index.html
Github地址：https://github.com/onokumus/metismenu
类似资料：