<script type="text/javascript">
$(function() {$('#side-menu').metisMenu(); // ul.nav#side-menu
})
</script>

<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<spanclass="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<spanclass="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<spanclass="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<spanclass="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>

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

/*** Created by hughd on 2017/8/9.* 简单版 - v1.0* 仅实现基础折叠*/
;(function ($, window, document, undefined) {var pluginName = "metisMenu";var toggle = true;function Plugin(element, options) {this.element = $(element);this.init();}Plugin.prototype = {init: function () {var $this = this.element;// var obj = this;$this.find("li.active").has("ul").children("ul").addClass('collapse in');// 初始激活的元素的后代全部展开$this.find('li').not(".active").has("ul").children("ul").addClass('collapse');// 未激活的元素显示隐藏// 监听点击事件$this.find("li").children("a").on("click." + pluginName, function () {//被点击的元素激活样式并展开$(this).parent('li').toggleClass('active').children("ul").collapse("toggle");if (toggle) {//将其他被展开的元素闭合$(this).parent("li").siblings().removeClass("active").children("ul").collapse("hide");}});}}$.fn[pluginName] = function (options) {// 实例化Plugin对象,并存放在元素<ul#side-menu>._proto_.metisMenu中this.data(pluginName, new Plugin(this, options));return this;}
})(jQuery, window, document);

/** metismenu - v1.1.3* Easy menu jQuery plugin for Twitter Bootstrap 3* https://github.com/onokumus/metisMenu** Made by Osman Nuri Okumus* Under MIT License*/
;(function($, window, document, undefined) {var pluginName = "metisMenu",defaults = {toggle: true,doubleTapToGo: false};function Plugin(element, options) {this.element = $(element);this.settings = $.extend({}, defaults, options);this._defaults = defaults;this._name = pluginName;this.init();}Plugin.prototype = {init: function() {var $this = this.element,$toggle = this.settings.toggle,obj = this;if (this.isIE() <= 9) {$this.find("li.active").has("ul").children("ul").collapse("show");$this.find("li").not(".active").has("ul").children("ul").collapse("hide");} else {$this.find("li.active").has("ul").children("ul").addClass("collapse in");$this.find("li").not(".active").has("ul").children("ul").addClass("collapse");}//add the "doubleTapToGo" class to active items if neededif (obj.settings.doubleTapToGo) {$this.find("li.active").has("ul").children("a").addClass("doubleTapToGo");}$this.find("li").has("ul").children("a").on("click" + "." + pluginName, function(e) {e.preventDefault();//Do we need to enable the double tapif (obj.settings.doubleTapToGo) {//if we hit a second time on the link and the href is valid, navigate to that urlif (obj.doubleTapToGo($(this)) && $(this).attr("href") !== "#" && $(this).attr("href") !== "") {e.stopPropagation();document.location = $(this).attr("href");return;}}$(this).parent("li").toggleClass("active").children("ul").collapse("toggle");if ($toggle) {$(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");}});},isIE: function() { //https://gist.github.com/padolsey/527683var undef,v = 3,div = document.createElement("div"),all = div.getElementsByTagName("i");while (div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",all[0]) {return v > 4 ? v : undef;}},//Enable the link on the second click.doubleTapToGo: function(elem) {var $this = this.element;//if the class "doubleTapToGo" exists, remove it and returnif (elem.hasClass("doubleTapToGo")) {elem.removeClass("doubleTapToGo");return true;}//does not exists, add a new class and return falseif (elem.parent().children("ul").length) {//first remove all other class$this.find(".doubleTapToGo").removeClass("doubleTapToGo");//add the class on the current elementelem.addClass("doubleTapToGo");return false;}},remove: function() {this.element.off("." + pluginName);this.element.removeData(pluginName);}};$.fn[pluginName] = function(options) {this.each(function () {var el = $(this);if (el.data(pluginName)) {el.data(pluginName).remove();}el.data(pluginName, new Plugin(this, options));});return this;};})(jQuery, window, document);

/** metismenu - v1.1.3* Easy menu jQuery plugin for Twitter Bootstrap 3* https://github.com/onokumus/metisMenu** Made by Osman Nuri Okumus* Under MIT License*/
.arrow {float: right;line-height: 1.42857;
}.glyphicon.arrow:before {content: "\e079";
}.active > a > .glyphicon.arrow:before {content: "\e114";
}/** Require Font-Awesome* http://fortawesome.github.io/Font-Awesome/
*/.fa.arrow:before {content: "\f104";
}.active > a > .fa.arrow:before {content: "\f107";
}.plus-times {float: right;
}.fa.plus-times:before {content: "\f067";
}.active > a > .fa.plus-times {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);
}.plus-minus {float: right;
}.fa.plus-minus:before {content: "\f067";
}.active > a > .fa.plus-minus:before {content: "\f068";
}