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的更多相关文章

  1. 使用Bootstrap+metisMenu完成简单的后台管理界面

    零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...

  2. 读源码 | metisMenu侧边栏插件

    ————————————————————————————————————————————————————————— 使用方法 实现效果 引入文件 <link rel="styleshe ...

  3. Bootstrap左侧下拉三级菜单

    在线实例 效果一 效果二 效果三 使用方法 <script src="/api/jq/BootstrapCaidan/js/metismenu.js"></scr ...

  4. SSM框架整合,以CRM为例子

          Mybatis.SpringMVC练习   CRM系统         回顾 Springmvc  高级参数绑定  数组  List <input type  name=ids /& ...

  5. Spring+MyBatis+SpringMvc整合Demo

    客户关系管理系统demo 项目分析 该demo使用技术及环境:ssm+maven+bootstrap+jsp+mysql+idea+jdk1.8 需求:客户管理,实现客户列表分页显示如下图 项目开始 ...

  6. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  7. 金融左侧js错误

  8. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  9. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

随机推荐

  1. Kafka理论学习

    Kafka Consumer设计解析 http://www.jasongj.com/2015/08/09/KafkaColumn4/

  2. git使用笔记(四)错误报告 Git push rejected error: fatal: refusing to merge unrelated histories

    Reason: The reason is because I created repo in Github with initiated README.md file, and I tried to ...

  3. 人生苦短之Python类的一二三

    在Python中,类也是以class开头定义的.我们定义一个动物类,它有名字和年龄,在java变量有实例变量和局部变量,方法内的变量是局部变量,类里面的变量是实例变量.那么在Python中的类及其属性 ...

  4. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  5. android BLE Peripheral 手机模拟设备发出BLE广播 BluetoothLeAdvertiser

    android 从4.3系统开始可以连接BLE设备,这个大家都知道了.iOS是从7.0版本开始支持BLE. android 进入5.0时代时,开放了一个新功能,手机可以模拟设备发出BLE广播, 这个新 ...

  6. 静态路由配置及RIP配置实验

    [实验环境] Packet Trace 5.3 模拟软件. [实验步骤] 1.首先要进行IP地址规划.(例如下图格式) 网络名 网络地址 子网掩码 网关 主机IP vlan1 10.10.1.0 25 ...

  7. AndroidManifest中的Intent-filter标签

    经过测试,intent-filter标签中的: 1. <action android:name="android.intent.action.MAIN" /> 代表这是 ...

  8. java第五天之---方法与数组

    案例一:从键盘输入两个数据,比较大小 import java.util.Scanner;class FunctionTest { public static void main(String[] ar ...

  9. javascript之闭包,递归,深拷贝

    闭包 理解:a函数执行后return出b函数且b函数可以访问a函数的数据 好处:子函数存储在复函数内部,子函数执行完不会被自动销毁 坏处:占用内存比较大 ex: function bibao(){ v ...

  10. Subsets Forming Perfect Squares

    题意: 给出n个数字,选出若干个数字,使得这些数字的乘积是一个完全平方数,问有多少种选法. 解法: 考虑异或方程组,$x_i$表示第i个数字是否选, 注意到只要保证结果中各个质因数都出现偶数次就可保证 ...