导航栏

导航栏
1、垂直菜单 :padding-left:10px； 会使宽度加10px； 可以使用text-indent:10px； 文本向右缩进10px:
2、水平菜单 li: float




  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>动画菜单</title>
  6. <style type="text/css">
  7. * { margin: 0; padding: 0; font-size: 14px; }
  8. a { color: #333; text-decoration: none }
  9. ul{ list-style: none; }
  10. .nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
  11. .nav li { float: left; position:relative; height:30px; width:120px }
  12. .nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
  13. .subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
  14. .subNav li a{ background:#ddd }
  15. .subNav li a:hover{ background:#efefef}
  16. </style>
  17. <script>
  18. window.onload=function(){
  19.     var aLi=document.getElementsByTagName('li');
  20. 	for(var i=0; i<aLi.length; i++){
  21. 	aLi[i].onmouseover=function(){
  22.             var oSubNav=this.getElementsByTagName('ul')[0];
  23.             if(oSubNav){
  24.             var This=oSubNav;
  25.             clearInterval(This.time);
  26.             This.time=setInterval(function(){
  27.                     This.style.height=This.offsetHeight+16+"px";
  28.                     if(This.offsetHeight>=120)
  29.                     clearInterval(This.time);
  30.                 },30)
  31.              }
  32.           }
  33.         
  34.     
  35.     
  36.     
  37.     
  38.     
  39.     
  40. 		}
  41.         //鼠标离开菜单，二级菜单动画收缩起来。		
  42. 		aLi[i].onmouseout=function(){
  43. 			
  44.             
  45.             
  46.             
  47.             
  48.             
  49.             
  50.             
  51.             
  52. 		}
  53. 		
  54. 		
  55. 	}
  56. }
  57. </script>
  58. </head>
  59. <body>
  60. <ul class="nav">
  61.     <li><a href="#">一级菜单</a>
  62.     	<ul class="subNav">
  63.         	<li><a href="#">二级菜单</a></li>
  64.             <li><a href="#">二级菜单</a></li>
  65.             <li><a href="#">二级菜单</a></li>
  66.             <li><a href="#">二级菜单</a></li>
  67.         </ul>
  68.     </li>
  69.     <li><a href="#">一级菜单</a>
  70.     	<ul class="subNav">
  71.         	<li><a href="#">二级菜单</a></li>
  72.             <li><a href="#">二级菜单</a></li>
  73.             <li><a href="#">二级菜单</a></li>
  74.             <li><a href="#">二级菜单</a></li>
  75.         </ul>
  76.     </li>
  77.     <li><a href="#">一级菜单</a></li>
  78.     <li><a href="#">一级菜单</a></li>
  79.     <li><a href="#">一级菜单</a></li>
  80. </ul>
  81. </body>
  82. </html>





附件列表

     

    posted on 2015-08-03 01:27  tongjiahao  阅读(166)  评论(0)  编辑  收藏  举报