首页
所有分类
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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JS正则表达式验证中文字符
May 08 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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
波兰购物网站(52) 奥地利购物网站(28) 新西兰购物网站(42) 智利购物网站(5) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9) 捷克购物网站(26) 斯洛伐克购物网站(7) 土耳其购物网站(10) 阿联酋购物网站(26)
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php密码生成类实例
2014/09/24 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
javascript实现打砖块小游戏（附完整源码）
2020/09/18 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19：蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[05:53]敌法师的金色冠名ID"BurNIng"，是传说，是荣耀
2020/07/11 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
python装饰器初探(推荐)
2016/07/21 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
美国宠物商店：Wag.com
2016/10/25 全球购物
美国在线家具网站：GDFStudio
2021/03/13 全球购物
商学院大学生求职的自我评价
2014/03/12 职场文书
留学生求职信
2014/06/03 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
好好学习保证书
2015/02/26 职场文书
晚会开场白和结束语
2015/05/29 职场文书
罗马假日观后感
2015/06/08 职场文书
宣传稿格式范文
2015/07/23 职场文书