Jquery实现缓慢显示下拉菜单
2016-05-09 21:29
447 查看
HTML代码:
<div class="navMenu"> <ul> <li class="active"><a href="#">首页</a> <ul> <span class="corner"></span> <li><a href="#">JavaScript+</a></li> <li><a href="#">语文</a></li> <li><a href="#">英语</a></li> </ul> </li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心+</a> <ul> <span class="corner"></span> <li><a href="#">JavaScript+</a></li> <li><a href="#">语文</a></li> </ul> </li> <li><a href="#">帮助</a></li> </ul> </div>
css代码:
*{ padding:0; margin:0; } /*一级菜单*/ .navMenu { width:570px; margin:0 auto; margin-top: 20px; position: relative; } .navMenu ul li{ float: left; } li{ list-style: none; background-color: #eee; width: 140px; height: 34px; text-align: center; margin-right: 2px; margin-bottom: 2px; } .navMenu ul li:hover{ background:url(images/slide-pannel_14.png) 0 0 repeat-x; } ul li a{ line-height: 34px; text-align: center; font-size: 20px; color: #000; text-decoration: none; display: block; padding:0 10px; } /*二级菜单*/ .navMenu ul li ul { display: none; position:absolute; top:34px; } .active{ background:url(images/slide-pannel_14.png) 0 0 repeat-x; } .corner{ display: block; height: 11px; background: url("images/bird.png") 61px 0 no-repeat ; }
Js代码:
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".navMenu li").mouseenter(function(){ $(this).find("ul").slideDown("slow"); //慢慢展开 }).mouseleave(function(){ $(this).find("ul").slideUp("slow");//慢慢收起 }) }) </script>
相关文章推荐
- 关于pjax.reload()加载页面时出现aborted超时终止的问题
- jQuery实现手机竖直手风琴效果
- jquery选项卡
- jQuery中的$(document).ready()与js中的window.onload
- jQuery的XX如何实现?——1.框架
- JQuery入门
- Jquery中动态的给元素绑定事件
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
- 关于jquery 取值,赋值常用控件的问题
- jquery监听鼠标滚轮(滚动)事件
- 基于jquery实现智能表单验证操作
- 基于jquery实现表格内容筛选功能实例解析
- jQuery 三级菜单
- jQuery绑定事件-多种实现方式总结
- jquery 处理 json
- jQuery在HTML中动态插入节点的常用方法
- jquery easyui 弹出对话框被activex控件遮挡问题
- jQuery中serializeArray serialize()区别
- jQuery Mobile orientationchange 事件
- 基于Jquery的banner轮播插件,简单粗暴