js-metisMenu
metisMenu是js的菜单插件,可以实现可折叠的二级菜单效果。
1 bootstrap折叠(Collapse)
直接引用bootstrap.js或者bootstrap.min.js就可以支持该插件
<!--整个折叠区块--> <div class="panel-group" id="accordion"> <!--第一块折叠区--> <div class="panel panel-default"> <!--第一块折叠区-引用heading板块--> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">折叠超链接1</a> </h4> </div> <!--第一块折叠区-引用body板块--> <div class="panel-collapse collapse in" id="collapseOne"> <div class="panel-body"> 折叠区1-1 </div> </div> </div> </div>
2 metisMenu折叠
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sqlsite</title> <link href="static/css/bootstrap.min.css" rel="stylesheet"> <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="static/css/animate.css" rel="stylesheet"> <link href="static/css/style.css" rel="stylesheet"> </head> <body> <div id="wrapper"> <nav class="navbar-default navbar-static-side" role="navigation"> <div class="sidebar-collapse"> <ul class="nav metismenu" id="side-menu"> <li class="nav-header"> <div class="dropdown profile-element"> <span> <img alt="image" class="img-circle" src="http://cn.inspinia.cn/html/inspiniaen/img/profile_small.jpg" /> </span> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">Name</strong></span> </span> </a> </div> <div class="logo-element"> IN+ </div> </li> <li> <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">数据查询</span> <span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li><a href="index.html">A库</a></li> </ul> </li> </ul> </div> </nav> <div id="page-wrapper" class="gray-bg"> <div class="row border-bottom"> <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a> <form role="search" class="navbar-form-custom" action="search_results.html"> <div class="form-group"> <input type="text" placeholder="请输入搜索内容" class="form-control" name="top-search" id="top-search"> </div> </form> </div> <ul class="nav navbar-top-links navbar-right"> <li> <span class="m-r-sm text-muted welcome-message">欢迎来到sqlsite</span> </li> <li> <a href="login.html"> <i class="fa fa-sign-out"></i> 注销 </a> </li> </ul> </nav> </div> <div class="row wrapper border-bottom white-bg page-heading"> <div class="col-lg-10"> <h2>资料页</h2> <ol class="breadcrumb"> <li> <a href="index.html">主页</a> </li> <li> <a>应用</a> </li> <li class="active"> <strong>资料页</strong> </li> </ol> </div> <div class="col-lg-2"> </div> </div> </div> </div> <!--Bootstrap core JavaScript--> <script src="static/js/jquery.min.js"></script> <script src="static/js/bootstrap.min.js"></script> <!-- Custom and plugin javascript --> <script src="static/js/plugin/metisMenu.js"></script> <script src="static/js/plugin/jquery.slimscroll.min.js"></script> <script src="static/js/plugin/inspinia.js"></script> <script src="static/js/plugin/pace.min.js"></script> </body> </html>