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 相关文章推荐
一次失败的jQuery优化尝试小结
Feb 06 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP中header用法小结
2016/05/23 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
七一建党日演讲稿
2014/09/05 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
python编程项目中线上问题排查与解决
2021/11/01 Python