metisMenu是一款生成多级导航菜单插件。本文的DEMO不仅用了bootstrap,还有prism代码高亮插件。
淘建站为您提供更多_导航菜单_下拉导航_bootstrap_下拉菜单,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 164 次
觉得不错,可打赏下作者
免费共享
多级下拉菜单结构图
<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.sucaiq.com/" target="_blank">
<span class="sidebar-nav-item-icon fa fa-code-fork"></span>
Fork
</a>
</li>
<li>
<a href="http://www.sucaiq.com/" target="_blank">
<span class="sidebar-nav-item-icon fa fa-star"></span>
Star
</a>
</li>
<li>
<a href="http://www.sucaiq.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.sucaiq.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();

