metisMenu側邊欄插件

介紹

metisMenu是一個jQuery的導航欄插件，使用該插件可以定義導航欄的二級甚至三級導航菜單，並能實現菜單的摺疊和展開等操作，將節省我們的開發時間，提高開發效率。

引入方式：

1. npm

$ npm install --save metismenu

2. yarn

$ yarn add metismenu

3. 直接引入

<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