首页 > 代码库 > 基于jQuery带图标的多级下拉菜单
基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单。今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单，菜单是垂直的，每一个菜单项带有一个小图标，看起来非常专业。并且菜单支持无限极下拉，所以对各位Web开发者来说非常实用。菜单时基于jQuery的，所以基本可以支持所有的浏览器。
在线预览 源码下载
实现的代码。
html代码：
<div class="content"> <ul class="vertical-nav dark red"> <li class="active"><a href="http://www.w2bc.com/"><i class="icon-home"></i>首页</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-cogs"></i>服务 <span class="submenu-icon"> </span></a> <ul> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> </ul> </li> <li><a href="http://www.w2bc.com/"><i class="icon-briefcase"></i>产品 <span class="submenu-icon"> </span></a> <ul> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航<span class="submenu-icon"></span></a><ul> <li><a href="http://www.w2bc.com/">三级导航</a></li> <li><a href="http://www.w2bc.com/">三级导航</a></li> <li><a href="http://www.w2bc.com/">三级导航 <span class="submenu-icon"></span></a> <ul> <li><a href="http://www.w2bc.com/">四级导航</a></li> <li><a href="http://www.w2bc.com/">四级导航</a></li> <li><a href="http://www.w2bc.com/">四级导航</a></li> <li><a href="http://www.w2bc.com/">四级导航</a></li> </ul> </li> <li><a href="http://www.w2bc.com/">三级导航</a></li> </ul> </li> <li><a href="http://www.w2bc.com/">二级导航</a></li> <li><a href="http://www.w2bc.com/">二级导航</a></li> </ul> </li> <li><a href="http://www.w2bc.com/"><i class="icon-user"></i>关于我们</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-comments-alt"></i>博客</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-picture"></i>导航</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-info"></i>信息</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-group"></i>团队</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-question"></i>常见问题</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-bar-chart"></i>案例</a></li> <li><a href="http://www.w2bc.com/"><i class="icon-envelope"></i>联系我们</a></li> </ul> </div>
via:http://www.w2bc.com/Article/16719
基于jQuery带图标的多级下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。