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

时间： 2024-10-10 15:27:06

基于jQuery带图标的多级下拉菜单的相关文章

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. Bootstrap 3 的多级下拉菜单示例 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&

jQuery如何实现点击下拉菜单的隐藏和显示

jQuery如何实现点击下拉菜单的隐藏和显示:在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果.这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" co

DroDownList控件多级下拉菜单

后台代码: /// <summary> /// 绑定下拉菜单 /// </summary> private void BindDropList() { DataTable dt = bacManage.GetAllArticleCategory(); CreateLevelDropDown(drpCategoryId, dt); } /// <summary> /// 创建分级下拉框 /// </summary> /// <param name=&qu

图片、图标类、下拉菜单、按钮、按钮组

<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="stylesheet" href="bootstrap.mi

jQuery 实现无限任意添加下拉菜单

新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈哈 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .menu-li-style{border:1px solid #B40607;}//第一层设置属性方便区分

JQuery -&gt; 超级简单的下拉菜单

使用jquery实现一个超级简单的下拉菜单. 效果图最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" > 鼠标悬浮效果代码 <!DOCTYPE html> <html> <head> <script type=&quo

js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

jquery多级下拉菜单

var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元素内 way : 0 只显示一个,1点击即显示; parent : 点击的祖先元素标识,用以查找控制元素 contr : 控制的元素 */function Click(me,parm){ var tar = parm.target, parent = parm.parent, contr = par