jQuery实现三级菜单的代码


Posted in Javascript onMay 09, 2016

上周新接手一个网站建设的活儿,其中有需要要jquery代码实现三级菜单的需求,其实说难也不难,下面小编把代码分享给大家,供大家参考。

先给大家展示下效果图,如果大家感觉还不错的话,请参考实现代码。

jQuery实现三级菜单的代码

HTML代码:

<body> 
<div class="navMenu"> 
<ul> 
<li><a href="#">首页</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">语文</a> 
<ul> 
<li><a href="#">唐诗</a></li> 
<li><a href="#">宋词</a></li> 
</ul> 
</li> 
<li><a href="#">英语</a></li> 
</ul> 
</li> 
<li><a href="#">课程大厅</a></li> 
<li><a href="#">学习中心+</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">语文</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">英语</a></li> 
</ul> 
</li> 
<li><a href="#">帮助</a></li> 
</ul> 
</div> 
</body>

js代码:

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("li").has("ul").mouseover(function(){ 
$(this).children("ul").css("display","block"); 
$(this).css("backgroundColor","#0066FF"); 
}).mouseout(function () { 
$(this).children("ul").css("display","none"); 
$(this).css("backgroundColor","#eee"); 
}) 
}) 
</script>

css代码:

*{ 
padding:0; 
margin:0; 
} 
/*一级菜单*/ 
.navMenu { 
width:570px; 
margin:0 auto; 
} 
.navMenu ul li{ 
float: left; 
position: relative; 
} 
li{ 
list-style: none; 
background-color: #eee; 
width: 140px; 
height: 40px; 
text-align: center; 
margin-right: 2px; 
margin-bottom: 2px; 
} 
ul li a{ 
line-height: 40px; 
text-align: center; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
display: block; 
padding:0 10px; 
} 
/*二级菜单*/ 
.navMenu ul li ul { 
display: none; 
position:absolute; 
left: 0; 
top:0; 
margin-top:42px; 
} 
.navMenu ul li ul li{ 
float:none; 
} 
/*三级菜单*/ 
.navMenu ul li ul li ul{ 
display: none; 
left:140px; 
top:-42px; 
}

以上内容是小编给大家介绍的jQuery实现三级菜单的代码,希望对大家有所帮助!

Javascript 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js字符串转成JSON
Nov 07 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
了解JavaScript中let语句
May 30 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Boostrap入门准备之border box
May 09 #Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 #Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
You might like
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
window.onload使用指南
2015/09/13 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
node+vue实现文件上传功能
2020/05/28 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python 读取位于包中的数据文件
2020/08/07 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
How TDD works
2012/09/30 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
银行批评与自我批评
2014/02/10 职场文书
经销商订货会主持词
2014/03/27 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
派出所所长先进事迹
2014/05/19 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
异地年检委托书范本
2014/09/24 职场文书
2015年教师节慰问信
2015/03/23 职场文书
通用员工手册范本
2015/05/14 职场文书