基于jQuery的感应鼠标淡出二级下拉菜单效果
2015-01-19 15:08
501 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基于jQuery的感应鼠标淡出二级下拉菜单效果丨河北金邦子锅炉</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0} table{border-collapse:collapse; border-spacing:0} fieldset, img{border:0} address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal} ol, ul{list-style:none} caption, th{text-align:left} h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal} q:before, q:after{content:''} abbr, acronym{border:0} :focus{outline:0} ins{text-decoration:none} del{text-decoration:line-through} a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } a { color: black } #nav li { float: left; position: relative; } #nav li a { background: #d6cfbd; border: 3px solid #4f4026; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; } #nav li a:hover { background: #f7f7f7; text-decoration: none; } #nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;} #nav li ul { background: #e1ddd3; border: 3px solid #4f4026; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; } #nav li ul li { width: 100% } #nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; } #nav li ul li a:hover { background: #f7f7f7;} </style> <script type='text/javascript' src='/images/jquery-1.4.2.min.js'></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav ul.child").removeClass("child"); $("#nav li").has("ul").hover(function(){ $(this).addClass("current").children("ul").fadeIn(); }, function() { $(this).removeClass("current").children("ul").hide(); }); }); </script> </head> <body> <div id="page-wrap"> <div id="content"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul class="child"> <li><a href="#">Hard Drives</a></li> <li><a href="#">Monitors</a></li> <li><a href="#">Speakers</a></li> <li><a href="#">Random Equipment</a></li> </ul> </li> <li><a href="#">Services</a> <ul class="child"> <li><a href="#">Repairs</a></li> <li><a href="#">Installations</a></li> <li><a href="#">Setups</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </body> </html> <br><br><br><br>第一次运行本代码,请刷新一下页面先~~~<br>所需js文件:<a href="/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a><hr>
相关文章推荐
- jquery实现鼠标滑过显示二级下拉菜单效果
- 基于jQuery实现二级下拉菜单效果
- jquery实现鼠标滑过显示二级下拉菜单效果
- jQuery实现仿flash大图切换效果(带鼠标感应)
- jquery 带缓冲效果二级下拉菜单
- 基于jQuery实现的向下滑动二级菜单效果代码
- jquery实现平滑的二级下拉菜单效果
- 基于jquery实现的鼠标拖拽元素复制并写入效果
- 基于jQuery创建鼠标悬停效果的方法
- 基于jquery鼠标点击图片翻开切换效果
- jQuery实现灰蓝风格标准二级下拉菜单效果代码
- 基于jquery的鼠标拖动效果代码
- 鼠标悬浮显示二级菜单效果的jquery实现
- jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
- 基于JQuery的一个简单的鼠标跟随提示效果
- 基于jQuery的鼠标悬停时放大图片的效果制作
- CSS+JS感应鼠标展开的的二级下拉菜单
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- 基于jQuery实现的向下滑动二级菜单效果代码
- jquery实现平滑的二级下拉菜单效果