首页
所有分类
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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
Express的路由详解
Dec 10 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
天线(6) 电路图(1) SW(1) 短波(1) 调幅(1) LW(1) 电台(1) 电磁辐射(1) PL-880(1) 发报机(1)
You might like
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
event.srcElement+表格应用
2006/08/29 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JavaScript代码实现简单计算器
2020/12/27 Javascript
详解Vite的新体验
2021/02/22 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
关于建议书的格式范文
2014/05/20 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
微电影大赛策划方案
2014/06/05 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
业务员辞职信范文
2015/03/02 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS