基于jQuery带图标的多级下拉菜单

之前为大家分享了很多导航菜单。今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业。并且菜单支持无限极下拉,所以对各位Web开发者来说非常实用。菜单时基于jQuery的,所以基本可以支持所有的浏览器。

基于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

上一篇:JavaScript权威指南--脚本化CSS


下一篇:Future 和 ExecutorCompletionService 对比和使用