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>
js-metisMenu的更多相关文章
- 使用Bootstrap+metisMenu完成简单的后台管理界面
零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...
- 读源码 | metisMenu侧边栏插件
————————————————————————————————————————————————————————— 使用方法 实现效果 引入文件 <link rel="styleshe ...
- Bootstrap左侧下拉三级菜单
在线实例 效果一 效果二 效果三 使用方法 <script src="/api/jq/BootstrapCaidan/js/metismenu.js"></scr ...
- SSM框架整合,以CRM为例子
Mybatis.SpringMVC练习 CRM系统 回顾 Springmvc 高级参数绑定 数组 List <input type name=ids /& ...
- Spring+MyBatis+SpringMvc整合Demo
客户关系管理系统demo 项目分析 该demo使用技术及环境:ssm+maven+bootstrap+jsp+mysql+idea+jdk1.8 需求:客户管理,实现客户列表分页显示如下图 项目开始 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 金融左侧js错误
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
随机推荐
- linux3 源代码安装
源代码安装: 通过yum就不会有依赖关系(安装mysql是安装mysqlServer).Rpm更新的时候,如果没有安装软件就回去安装. 应用程序和系统命令会放在不同的目录中(bin,sbin,usr/ ...
- HttpServlet cannot be resolved to a type解决方法
1:是因为没有加入servlet-api.jar 2:下载网址:http://download.csdn.net/detail/jiuyueguang/5745209 3:然后在项目右键->bu ...
- Linux升级安装GCC G++ 6.2
使用yum安装是不可能了,各大仓库也没有,只能自己编译安装了. 系统为CentOS 6.5,gcc为4.4.7 1 下载源代码包 当前最新版为6.2: wget http://ftp.gnu.org/ ...
- codeforces 509 B题 Painting Pebbles
转载地址:http://blog.csdn.net/nike0good/article/details/43449739 B. Painting Pebbles time limit per test ...
- Codeforces Round #198 (Div. 2) E. Iahub and Permutations —— 容斥原理
题目链接:http://codeforces.com/contest/340/problem/E E. Iahub and Permutations time limit per test 1 sec ...
- BestCoder7 1002 Little Pony and Alohomora Part I(hdu 4986) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4986 题目意思:有 n 个box(从左到右编号依次为1~n),每个box里面有一个随机的钥匙,有可能这 ...
- hdu-2157 How many ways??(矩阵快速幂)
题目链接: How many ways?? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
- apache web 服务器
0. 特性与特点 性能方面,apache 在设计时采用了以"进程"为基础的结构,自然进程比线程消耗了更多的系统开销,导致了 apache 在多处理器环境中性能有所下降: 因此,在对 ...
- bzoj 5072 [Lydsy1710月赛]小A的树——树形dp
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5072 发现对于每个子树,黑点个数确定时,连通块的大小取值范围一定是一段区间:所以考虑只最小化 ...
- poj2828 Buy Tickets——倒序处理
题目:http://poj.org/problem?id=2828 这题可以倒序来做,因为越靠后的人实际上优先级越高: 用0和1表示这个位置上是否已经有人,0表示有,1表示没有,这样树状数组维护前缀和 ...