最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

Bootstrap左侧下拉三级菜单导航

来源:http://www.erdangjiade.com/ 二当家的 2016-01-04 18:50浏览(1661)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

Bootstrap左侧下拉三级菜单导航
分类:导航菜单 > 下拉导航 难易:中级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

多级下拉菜单结构图

<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.erdangjiade.com/" target="_blank">
                    <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                    Fork
                </a>
            </li>
            <li>
                <a href="http://www.erdangjiade.com/" target="_blank">
                    <span class="sidebar-nav-item-icon fa fa-star"></span>
                    Star
                </a>
            </li>
            <li>
                <a href="http://www.erdangjiade.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.erdangjiade.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();
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/644.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2