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三级下拉列表导航菜单代码,希望大家可以喜欢。

Javascript 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
深入理解angularjs过滤器
May 25 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Vue代码整洁之去重方法整理
Aug 06 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
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
js中的this的指向问题详解
2019/08/29 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
党校自我鉴定范文
2013/10/02 职场文书
海南地接欢迎词
2014/01/14 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
创业计划书之服装
2019/10/07 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Oracle 区块链表创建过程详解
2021/05/15 Oracle