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. 向HTML页面传入参数

    这次是想将参数传入HTML页面,通过js获取参数信息,动态生成HTML页面内容: 方法一: <script> function GetArgsFromHref(sHref, sArgNam ...

  2. [RK3288][Android6.0] 调试笔记 --- 软硬键盘同时使用【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/78748313 Platform: RK3288 OS: Android 6.0 Kernel ...

  3. selenium使用笔记（一）——selenium你该知道的

    有时候在交流群里经常会看到这样的问题,selenium能进行性能测试吗?selenium1和selenium2有什么区别等等问题,在这里谈一下自己学习和工作以后对selenium的认识.我所记录的东西 ...

  4. linux命令学习笔记 : install 命令

    install .作用 install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户. .格式 ()install [选项]... 来源 目的地 ()install [选项]... 来源 ...

  5. Linux下监控网卡流量的软件iftop

    官网上说使用iftop需要libpcap和libcurses这两个包. 用命令查找了一下 #  rpm -qa | grep libpcap libpcap-0.9.4-15.el5 只找到了这个,缺 ...

  6. MongoDB 复制集节点增加移除及节点属性配置

    复制集(replica Set)或者副本集是MongoDB的核心高可用特性之一,它基于主节点的oplog日志持续传送到辅助节点,并重放得以实现主从节点一致.再结合心跳机制,当感知到主节点不可访问或宕机 ...

  7. 解决向github提交代码不用输入帐号密码

    解决方案:方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/username Mac OS X: /Users/username Linux ...

  8. 《Kubernetes权威指南第2版》学习（一） Kubernetes是什么

    1.1 Kubernetes是什么? 首先,它是一个全新的基于容器技术的分布式架构领先方案.是谷歌的Borg(大规模集群管理系统)的一个开源版本. 其次,如果系统设计遵循了Kubernetes的设计思 ...

  9. java.lang.NoSuchMethodError: org.springframework.core.io.ResourceEditor错误

    一般是jar包冲突,或者某些jar包版本不同. 如上,spring其他包的版本均为4.2.5,而spring-webmvc的jar包为1.2.6版本,造成版本冲突. 把该包版本改为4.2.5,宣告成功 ...

  10. How Many Boyfriends

    知乎上看到一个问题,如果一个女人说自己集齐了12个星座的男朋友,那么她已经搞过多少男人了. 先考虑这个问题的最简单版本,如果说该女人每一次和12个星座的男人交往的概率相同. 考虑$dp$ 注意到这个问 ...