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>

转载于:https://www.cnblogs.com/jabbok/p/9767758.html

js-metisMenu相关推荐

使用Bootstrap+metisMenu完成简单的后台管理界面
零. 写在前面作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...
读源码 | metisMenu侧边栏插件
--------------------------------------------------------- 使用方法实现效果引入文件 <link rel="styleshe ...
分页标签commons.tld，NavigationTag，Page
分页标签的使用一.commons.tld 将这个文件复制到项目的 WEB-INF 文件夹下 <?xml version="1.0" encoding="UTF- ...
bootstrap侧面菜单栏
导入需要引用的css 和 js <link rel="stylesheet" href="/static/css/bootstrap.min.css"&g ...
手把手教你如何玩转插件：分页插件（Pagehelper）
情景引入: 小白:起床起床,,,快起床!!! 我:怎么怎么了,小白你到底又怎么了.. 小白:我发现在Web系统中,分页是一种很常见的功能,可是,我之前写的方法都比较麻烦,移植性不是很高,有没有什么好办 ...
Echarts绘图技术总结
Echarts是百度发布的一种绘图工具,通过Echarts,我们可以绘制各种图形:包括折线图(Line).条形图(Bar).饼图(Pie).散点图(Scatter).地图(Map)等.今天我们来谈谈如 ...
使用SSM框架实现增删改查
springmvc的理解:https://blog.csdn.net/qq_41879385/article/details/82885516本项目的jsp页面使用bootstrap前端框架:http ...
jquery.metisMenu.js插件
metisMenu是一个jQuery的导航栏插件,使用该插件可以定义导航栏的二级甚至三级导航菜单,并能实现菜单的折叠和展开等操作,将节省我们的开发时间,提高开发效率. 1. 准备工作:引入文件 bo ...
metisMenu.js动态侧边导航的实现（ajax动态渲染部分导航）
使用metisMenu.js实现后台管理系统的导航,通过点击导航,切换不同的页面内容.有些时候.我们需要动态添加页面的内容,即通过ajax请求后台来渲染部分导航的内容. 第一部分是静态导航的实现,即通 ...
插件学习：metisMenu.min.js
2019独角兽企业重金招聘Python工程师标准>>> github地址参考教程 #引入 css引入默认的,但可以不要样式自己写,默认的也不是太喜欢 js: <script ...

js-metisMenu

1 bootstrap折叠（Collapse）

2 metisMenu折叠

js-metisMenu相关推荐

最新文章

热门文章