Bootstrap左侧下拉三级菜单导航

metisMenu是一款生成多级导航菜单插件。本文的DEMO不仅用了bootstrap，还有prism代码高亮插件。

分类：导航菜单 > 下拉导航难易：中级

查看演示下载资源下载积分： 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();