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

在线预览   源码下载

实现的代码。

html代码:

 <div class="content"><ul class="vertical-nav dark red"><li class="active"><a href="http://***/"><i class="icon-home"></i>首页</a></li><li><a href="http://***/"><i class="icon-cogs"></i>服务 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li></ul></li><li><a href="http://***/"><i class="icon-briefcase"></i>产品 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航<span class="submenu-icon"></span></a><ul><li><a href="http://***/">三级导航</a></li><li><a href="http://***/">三级导航</a></li><li><a href="http://***/">三级导航 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">四级导航</a></li><li><a href="http://***/">四级导航</a></li><li><a href="http://***/">四级导航</a></li><li><a href="http://***/">四级导航</a></li></ul></li><li><a href="http://***/">三级导航</a></li></ul></li><li><a href="http://***/">二级导航</a></li><li><a href="http://***/">二级导航</a></li></ul></li><li><a href="http://***/"><i class="icon-user"></i>关于我们</a></li><li><a href="http://***/"><i class="icon-comments-alt"></i>博客</a></li><li><a href="http://***/"><i class="icon-picture"></i>导航</a></li><li><a href="http://***/"><i class="icon-info"></i>信息</a></li><li><a href="http://***/"><i class="icon-group"></i>团队</a></li><li><a href="http://***/"><i class="icon-question"></i>常见问题</a></li><li><a href="http://***/"><i class="icon-bar-chart"></i>案例</a></li><li><a href="http://***/"><i class="icon-envelope"></i>联系我们</a></li></ul></div>

via:http://***/Article/16719

转载于:https://www.cnblogs.com/liaohuolin/p/4220549.html

基于jQuery带图标的多级下拉菜单相关推荐

  1. jquery实现多级下拉菜单

    支持多种浏览器,体验效果: http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: 1 < ...

  2. Bootstrap 多级下拉菜单

    在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...

  3. 下拉框可筛选多层级菜单多选_用Excel做多级下拉菜单媲美网页筛选器

    用Excel进行数据收集,做好一个数据录入文件给用户使用,结果收回来的数据让你令人抓狂:手机号不是11位 面积单位有人写平方米,有人写m2 张冠李戴,明明写姓名的地方,写了性别 说好写保留一位小数,却 ...

  4. iOS 多级下拉菜单

    前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单 二级下拉筛选菜单. ...

  5. qml中使用combobox实现多级菜单_excel实用技巧:如何构建多级下拉菜单

    编按:哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的下拉菜单,可能就有点蒙圈了.其实用Excel制作三级下拉菜单,一点都不难,它就跟 ...

  6. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  7. 手动制造报错_告别手动录入数据的错误,Excel多级下拉菜单怎么制作?

    知识改变命运,科技成就未来.Microsoft Excel数据录入是我们常会遇到的情况,尤其是对于固定数据的录入,每个人的习惯不同,录入的数据也会千差万别,对后期的数据统计造成不便,有什么办法能解决这 ...

  8. 三星二级菜单_Excel 如何设计带联想的二级下拉菜单?

    在百度搜索网站中输入搜索关键词时,百度会逐步弹出相关的词条列表.例如,输入"三"会弹出包含"三国杀"."三维度"之类的词条列表,而输入&qu ...

  9. excel实用技巧:如何构建多级下拉菜单

    使用数据有效性制作下拉菜单对大多数小伙伴来说都不陌生,但说到二级和三级下拉菜单大家可能就不是那么熟悉了. 什么是二级和三级下拉菜单呢?举个例子,在一个单元格选择某个省后,第二个单元格选项只能出现该省份 ...

最新文章

  1. view5.3登录桌面提示当前可用桌面资源不足
  2. hbase设计方案1
  3. 安卓高手之路之 WindowManager
  4. 阿里开源自主研发的 DFSMN 语音识别模型,引谷歌论文引用
  5. matlab三参数拟合函数,数据拟合,有三个参数,提示拟合参数太多,谢谢您啦!...
  6. oracle原始数据类型,Oracle基本数据类型存储格式浅析——RAW类型
  7. JavaScript:动态选中CheckBox
  8. qpython怎么添加pip_Q: 在Windows上安装Python 2.7的pyHook和pip
  9. java 开源 网络流量统计_jpcap java流量监控
  10. 第一次带姐姐和弟弟去看海
  11. 15-3 并发调度器
  12. 10天学会phpWeChat——第一天:核心框架的目录结构
  13. JS-商品图片点击轮换
  14. kettle MySQL blob_KETTLE BLOB 问题
  15. 结构体C语言王者归来
  16. JDK7官方下载地址
  17. java lazy_在Java8中模拟Lazy
  18. js获取视频长度的3种方法
  19. 城市轨道交通站应急照明疏散指示系统设计
  20. (1)声明一个圆柱体类型,(2)声明属性:底边的半径,和高(3)声明方法:A:方法的功能:在方法中打印圆柱体的详细信息:圆柱体的底边的半径是xxx,高是xxx,底面积是xxx,体积是xxx。B

热门文章

  1. BIOS功能调用之滚屏与清屏
  2. 3D数学基础:图形与游戏开发---随笔五
  3. 原子操作的实现原理(锁和循环CAS)
  4. 从思维导图学习操作系统(一)
  5. Altium Designer -- PCB布线面试题(转)
  6. 划线价格怎么弄java_京东可以设置划线价格吗?怎么设置?
  7. Android PC投屏简单尝试—最终章1
  8. Android数据之Json解析
  9. python用pil图像放大缩小_python使用PIL缩放网络图片并保存的方法
  10. 26个音序的正确写法和占格_别让瞎练毁了健康,26个健身动作正误对比图,让我们正确健身...