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. Raspberry Pi3 ~ 安装 nfs Server

    l  安装必要服务: sudo      apt-get install  portmap sudo  apt-get install  nfs-kernel-server sudo      apt ...

  2. Non-parseable POM C:\Users\admin\.m2\repository\org\springframework问题解决方案

    现象: [INFO] Scanning for projects... [ERROR] [ERROR] Some problems were encountered while processing ...

  3. 操作系统：Bochs 2.6.8的配置文件bochsrc.bxrc修改

    由于现在Bochs 2.6.8相比之前有些改动,之前的配置文件不能直接运行,针对配置文件需要有些修改. 1. 配置文件 ######################################## ...

  4. 基于BASYS2的VHDL程序——交通灯（状态机版）

    请尊重作者版权,转载注明源地址:http://www.cnblogs.com/connorzx/p/3694618.html 使用了状态机,增加了可读性和用户体验. library IEEE; use ...

  5. 旋转屏幕导致Activity重建

    简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系统会销毁并重建Activity以便反映新的Conf ...

  6. smarty模板引擎基础（二）

    smarty模板引擎所需文件夹共可分为存放页面缓存的(cache).存放配置文件的(configs).存放模板扩充插件的(plugins).存放模板文件的(templates).存放编译后的模板文件的 ...

  7. JMeter参数化设置——通过函数助手

    Now you can know everything in the world, but the only way you're findin' out that one is by givin' ...

  8. UVA562(01背包均分问题)

    Dividing coins Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Descriptio ...

  9. Nuget：Newtonsoft.Json

    ylbtech-Nuget:Newtonsoft.Json 1.返回顶部   2.返回顶部 1,Serialize JSON Product product = new Product(); prod ...

  10. css3 position:sticky

    最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取 ...