jQuery可智能判断下啦菜单特效
2015-10-15 14:28
771 查看
jQuery可智能判断下啦菜单特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery可智能判断下啦菜单特效</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css"> *{margin: 0; padding: 0;} body{ font-size: 12px; } li{ list-style: none;} ul.nav li{ width: 200px; text-align:center;} ul.nav > li{ float: left; margin-right:10px;} ul.nav li h3{height: 40px; line-height: 40px;} ul.nav > li > h3{ background: #72a7ff;} ul.nav > li > ul > li h3{ background: #ffd9d9;} ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;} ul > li > ul{ display: none;} ul > li.on > ul{ display: block;} ul.nav li{ position: relative;} ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;} </style> <script type="text/javascript"> $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).addClass("on"); }, function(){ $(this).removeClass("on"); }) $("ul.nav li").hover(function(){ $(this).parent("ul").siblings("h3").addClass("choice"); }, function(){ $(this).parent("ul").siblings("h3").removeClass("choice"); }) }); </script> </head> <body> <ul class="nav"> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> </ul> </li> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> <li><h3>2级分类</h3> <ul> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> <li><h3>3级分类</h3></li> </ul> </li> </ul> </li> </ul> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>
相关文章推荐
- jQuery下级菜单
- jQuery下级菜单
- asp接收jquery post 中文乱码问题!
- 基于jquery的循环左右滚动和上下滚动效果
- jquery操作父页面
- jquery ajax 二进制请求
- jquery $.get 400 错误
- JQuery操作select checkbox radio总结
- 关于jQuery中自定义函数的操作
- jquery uploadify上传文件动态传参
- jquery的$.extend和$.fn.extend作用及区别
- xpages domino动态编辑树
- 101 jquery 子类选择器
- jquery实现简单实用的弹出层效果代码
- PHP+Mysql+jQuery实现发布微博程序 php篇
- jquery替换URL参数值
- jQuery实现仿QQ在线客服效果的滚动层代码
- JQuery中2个等号与3个等号的区别
- jquery 层级选择器
- jQuery $.each用法