您好,欢迎来到我要学flash网!登录注册

jquery动态菜单效果

来源:我要学flash网 | 作者:admin | 发表时间:2012-03-03 | 点击:  次

这个我在网上看到的一位大牛写的jquery动态菜单,写的真好,我本来想学着自己写一个但是人家写的太好自己写的不行。所以今天我就把这个代码放上来供大家学习参考这位大牛写的代码注释也足够清楚大家可以细细研究。多余的话就不多说了,唉对了祝大家五一玩的开心!

预览图:


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  5. <title>jOuery:动态下滑菜单演示</title> 
  6. <style> 
  7. /*------------------------*/  
  8.     #content {  
  9.     width: 760px;  
  10.     margin: 50px auto;  
  11.     margin-bottom:0;  
  12.     padding:20px 20px 40px;  
  13.     background: #FFF;  
  14.     border: 1px solid #CCC;  
  15. }  
  16. /*------------------------*/  
  17.         .menu {  
  18.     height: 45px;  
  19.     display: block;  
  20. }  
  21. .menu ul {  
  22.     list-style: none;  
  23.     padding: 0;  
  24.     margin: 0;  
  25. }  
  26. .menu ul li {  
  27.     float: left;  
  28.     /* 菜单子元素的内容超出不可见 */  
  29.             overflow: hidden;  
  30.     position: relative;  
  31.     text-align: center;  
  32.     line-height: 45px;  
  33. }  
  34. .menu ul li a {  
  35.     /* 必须是相对定位  */  
  36.             position: relative;  
  37.     display: block;  
  38.     width: 110px;  
  39.     height: 45px;  
  40.     font-family: Arial;  
  41.     font-size: 11px;  
  42.     font-weight: bold;  
  43.     letter-spacing: 1px;  
  44.     text-transform: uppercase;  
  45.     text-decoration: none;  
  46.     cursor: pointer;  
  47. }  
  48. .menu ul li a span {  
  49.     /* 所有层将使用绝对定位 */  
  50.             position: absolute;  
  51.     left: 0;  
  52.     width: 110px;  
  53. }  
  54. .menu ul li a span.out {  
  55.     top: 0px;  
  56. }  
  57. .menu ul li a span.over, .menu ul li a span.bg {  
  58.     /* 起初.over层和.bg层相对a元素-45px以达到隐藏 */  
  59.             top: -45px;  
  60. }  
  61. /** 完整版示例 **/  
  62.         #menu {  
  63.     background:url(http://www.xh-css.cn/jquery/images/bg_menu.gif) scroll 0 -1px repeat-x;  
  64.     border:1px solid #CCC;  
  65. }  
  66. #menu ul li a {  
  67.     color: #000;  
  68. }  
  69. #menu ul li a span.over {  
  70.     color: #FFF;  
  71. }  
  72. #menu ul li span.bg {  
  73.     height: 45px;  
  74.     background: url(http://www.xh-css.cn/jquery/images/bg_over.gif) center center no-repeat;  
  75. }  
  76. /** 简化版示例 **/  
  77.         #menu2 {  
  78.     background:#45A8DF;  
  79. }  
  80. #menu2 ul li a {  
  81.     color:#FFF;  
  82. }  
  83. #menu2 ul li a span.over {  
  84.     background: #A6DD00;  
  85.     color:#333;  
  86. }  
  87. #menu2 ul li.nav1 a span.over {  
  88.     background: #fea274;  
  89. }  
  90. #menu2 ul li.nav2 a span.over {  
  91.     background: #b0bbba;  
  92. }  
  93. #menu2 ul li.nav3 a span.over {  
  94.     background: #a3f091;  
  95. }  
  96. #menu2 ul li.nav4 a span.over {  
  97.     background: #86dbf9;  
  98. }  
  99. #menu2 ul li.nav5 a span.over {  
  100.     background: #e0caf0;  
  101. }  
  102. #menu2 ul li.nav6 a span.over {  
  103.     background: #9dace9;  
  104. }  
  105. </style> 
  106. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
  107. <script language="javascript"> 
  108.         $(document).ready(function() {  
  109.             /*  完整版示例   */  
  110.             // 把每个a中的内容包含到一个层(span.out)中,在span.out层后面追加背景图层(span.bg)  
  111.             $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );  
  112.             // 循环为菜单的a每个添加一个层(span.over)  
  113.             $("#menu li a").each(function() {  
  114.                 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );  
  115.             });  
  116.             $("#menu li a").hover(function() {  
  117.                 // 鼠标经过时候被触发的函数  
  118.                 $(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏  
  119.                 $(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示  
  120.                 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示  
  121.             }, function() {  
  122.                 // 鼠标移出时候被触发的函数  
  123.                 $(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示  
  124.                 $(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏  
  125.                 $(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏  
  126.             });  
  127.             /*  简化版示例   */  
  128.             $("#menu2 li a").wrapInner( '<span class="out"></span>' );  
  129.             $("#menu2 li a").each(function() {  
  130.                 $('<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );  
  131.             });  
  132.             $("#menu2 li a").hover(function() {  
  133.                 $(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏  
  134.                 $(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示  
  135.             }, function() {  
  136.                 $(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示  
  137.                 $(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏  
  138.             });  
  139.         });  
  140.     </script> 
  141. </head> 
  142. <body> 
  143. <div id="content"> 
  144.   <div id="menu" class="menu"> 
  145.     <ul> 
  146.       <li><a href="javascript:;">Home</a></li> 
  147.       <li><a href="javascript:;">HTML/CSS</a></li> 
  148.       <li><a href="javascript:;">JavaScript</a></li> 
  149.       <li><a href="javascript:;">Resources</a></li> 
  150.       <li><a href="javascript:;">Tutorials</a></li> 
  151.       <li><a href="javascript:;">About</a></li> 
  152.     </ul> 
  153.   </div> 
  154.   <p>&nbsp;</p> 
  155.   <p>简化版(无图片)示例</p> 
  156.   <br/> 
  157.   <div id="menu2" class="menu"> 
  158.     <ul> 
  159.       <li class="nav1"><a href="javascript:;">Home</a></li> 
  160.       <li class="nav2"><a href="javascript:;">HTML/CSS</a></li> 
  161.       <li class="nav3"><a href="javascript:;">JavaScript</a></li> 
  162.       <li class="nav4"><a href="javascript:;">Resources</a></li> 
  163.       <li class="nav5"><a href="javascript:;">Tutorials</a></li> 
  164.       <li class="nav6"><a href="javascript:;">About</a></li> 
  165.     </ul> 
  166.   </div> 
  167. </div> 
  168. </body> 
  169. </html> 

 


顶一下
(0)
0%
踩一下
(0)
0%
本文引用地址:
  最新评论: 共有位网友发表了评论
  发表评论:
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码: