首页 > 代码库 > 基于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带图标的多级下拉菜单