首页
所有分类
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 相关文章推荐
php 中序列化和json使用介绍
Jul 08 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
js实现select下拉框菜单
Dec 08 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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) ICF-5900W(2) TcpServer(1) EventBus(1) muduo(1) pt-archiver(1) B+树(2) instantclient(1) 存储过程(3) Fragment(1)
You might like
PHP中的正规表达式（一）
2006/10/09 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
js实现随机抽奖
2020/03/19 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python with的用法
2014/08/22 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Django框架 信号调度原理解析
2019/09/04 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
SmartBuyGlasses台湾：名牌眼镜，名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
美国运动鞋和服装网上商店：YCMC
2018/09/15 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
生物制药自我鉴定
2014/01/25 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
2014年基建工作总结
2014/12/12 职场文书
三好学生个人总结
2015/02/15 职场文书
python利用while求100内的整数和方式
2021/11/07 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android