Bootstrap左侧下拉三级菜单导航

来源:https://www.sucaihuo.com/js/644.html 2016-01-04 18:50浏览(13320) 收藏

metisMenu是一款生成多级导航菜单插件。本文的DEMO不仅用了bootstrap,还有prism代码高亮插件。
Bootstrap左侧下拉三级菜单导航
分类:导航菜单 > 下拉导航 难易:中级
查看演示 下载资源 下载积分: 20 积分

多级下拉菜单结构图

<ul id="menu">
    <li class="active">
        <a href="#">
            <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
            <span class="sidebar-nav-item">metisMenu</span>
            <span class="fa arrow"></span>
        </a>
        <ul>
            <li>
                <a href="http://www.sucaihuo.com/" target="_blank">
                    <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                    Fork
                </a>
            </li>
            <li>
                <a href="http://www.sucaihuo.com/" target="_blank">
                    <span class="sidebar-nav-item-icon fa fa-star"></span>
                    Star
                </a>
            </li>
            <li>
                <a href="http://www.sucaihuo.com/" target="_blank">
                    <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
                    Issues
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 0 <span class="fa arrow"></span></a>
        <ul>
            <li><a href="#">item 0.1</a></li>
            <li><a href="#">item 0.2</a></li>
            <li><a href="http://www.sucaihuo.com/" target="_blank">onokumus</a></li>
            <li><a href="#">item 0.4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
        <ul>
            <li><a href="#">item 1.1</a></li>
            <li><a href="#">item 1.2</a></li>
            <li>
                <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                <ul>
                    <li><a href="#">item 1.3.1</a></li>
                    <li><a href="#">item 1.3.2</a></li>
                </ul>
            </li>
            <li><a href="#">item 1.4</a></li>
            <li>
                <a href="#">Menu 1.5 <span class="fa plus-minus"></span></a>
                <ul>
                    <li><a href="#">item 1.5.1</a></li>
                    <li><a href="#">item 1.5.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2 <span class="glyphicon arrow"></span></a>
        <ul>
            <li><a href="#">item 2.1</a></li>
        </ul>
    </li>
</ul>

引入并调用metismenu导航菜单插件

<script src="js/metismenu.js"></script>
$('#menu').metisMenu();
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 3楼
    06-07 23:08
    u***6
    适合我,下载下来试试。
  • 头像 板凳
    11-02 12:34
    迷***路
    下载看看呢
  • 头像 椅子
    01-16 09:19
    1***m
    这款插件兼容性怎么样
  • 头像 沙发
    01-08 18:02
    1***0
    应当好好学习
1 2