首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery三级下拉列表导航菜单代码分享

Posted in Javascript onApril 15, 2020

本文实例讲述了jQuery三级下拉列表导航菜单，分享给大家供大家参考，具体如下

jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。

运行效果图：             -------------------查看效果-------------------

jQuery三级下拉列表导航菜单代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery三级下拉列表导航菜单代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery三级下拉列表导航菜单</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style type="text/css">
*{margin: 0; padding: 0;}
body{ font-size: 12px; }
li{ list-style: none;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li h3{height: 40px; line-height: 40px;}
ul.nav > li > h3{ background: #72a7ff;}
ul.nav > li > ul > li h3{ background: #ffd9d9;}
ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}
</style>

<script type="text/javascript">
 $(document).ready(function() {
 $("ul.nav li").hover(function(){
 $(this).addClass("on");

 },
 function(){
 $(this).removeClass("on");

 })
 });

 $(document).ready(function() {
 $("ul.nav li").hover(function(){
 $(this).parent("ul").siblings("h3").addClass("choice");

 },
 function(){
 $(this).parent("ul").siblings("h3").removeClass("choice");
 })
 });

 $(document).ready(function() { 
 if ($("ul.nav li").find("ul") .html()!="") {
 $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>"); 
 }
 });
</script>


</head>
<body>
<ul class="nav">
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3>
 <ul>
 <li><h3>4级分类</h3>
  <ul>
  <li><h3>5级分类</h3></li>
  <li><h3>5级分类</h3></li>
  <li><h3>5级分类</h3></li>
  <li><h3>5级分类</h3></li>
  </ul>
 </li>
 <li><h3>4级分类</h3></li>
 <li><h3>4级分类</h3></li>
 <li><h3>4级分类</h3></li>
 </ul>
 </li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 <li><h3>2级分类</h3>
 <ul>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 <li><h3>3级分类</h3></li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

</body>
</html>

以上就是为大家分享的jQuery三级下拉列表导航菜单代码，希望大家可以喜欢。

jQuery三级下拉列表导航菜单代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
采用call方式实现js继承
May 20 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 #Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 #Javascript
javascript中alert()与console.log()的区别
Aug 26 #Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 #Javascript
基于jQuery实现的QQ表情插件
Aug 25 #Javascript
js中javascript:void(0) 真正含义
Nov 05 #Javascript
js实现三张图（文）片一起切换的banner焦点图
Aug 25 #Javascript
游标(1) 绝对定位(1) postcss-px2rem(1) 表变量(1) props(1) mixin(1) ECharts(3) ref(1) ip连接(1) GTID(1)
You might like
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JS验证不重复验证码
2017/02/10 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
详解Python self 参数
2019/08/30 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
乌克兰香水和化妆品网站：Notino.ua
2018/03/26 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
客户答谢会活动方案
2014/08/31 职场文书
购房个人委托书范本
2014/10/11 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
80后创业总结的9条职场用人思想，记得收藏
2019/08/13 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python