Jquery实现三级菜单的制作
2016-05-08 23:11
477 查看
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").mouseenter(function(){ $(this).children("ul").css("display","block"); $(this).css("backgroundColor","#0066FF"); }).mouseleave(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判断IE浏览器6/7/8
- jquery实现左右无缝轮播图
- JQuery--JQuery面向对象编程快速入门-插件开发
- JQuery——表单使用submit()无法提交
- 《锋利的JQuery》学习笔记
- jQuery中children()和find()的区别
- jQuery-强大的jQuery选择器 (详解)
- jQuery高级事件
- jQuery事件对象
- jQuery基础事件
- jquery使用历经
- jQuery操作DOM元素
- jQuery-遍历
- jQuery-DOM节点的复制与替换
- jQuery-DOM节点的删除
- jQuery-DOM节点的插入
- jQuery表单选择器
- jQuery对象与JS原生dom对象之间的转换
- Jquery Ajax 跨域调用asmx类型 WebService范例
- Jquery过滤性选择器