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>

  

 

posted @ 2018-10-10 17:19  jabbok  阅读(578)  评论(0编辑  收藏  举报