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>实用js+css滑动门导航菜单</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 a:link,a:visited{text-decoration:none;} 9 a:hover{text-decoration:none;} 10 ul{list-style:none;} 11 .menu_zzjs_net{background:#333;float:left;padding-top:2px;width:100%;} 12 .menu_zzjs_net li{float:left;} 13 .menu_zzjs_net li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;} 14 .menu_zzjs_net .this_zzjs a {background:#fff;color:#000;} 15 .sub_zzjs{clear:both;border:2px solid #000;border-top:none;background:#fff;} 16 .sub_zzjs ul{display:none;padding:15px;line-height:180%;} 17 </style> 18 </head> 19 <body> 20 <ul class="menu_zzjs_net"> 21 <li class="this_zzjs"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">一号菜单</a></li> 22 <li><a href="#" >二号菜单</a></li> 23 <li><a href="#">三号菜单</a></li> 24 <li><a href="#" >四号菜单</a></li> 25 </ul> 26 <div class="sub_zzjs"> 27 <ul style="display:block;"> 28 <li><a href="http://www." >子菜单1</a></li> 29 <li><a href="http://www." >子菜单2</a></li> 30 <li><a href="http://www." >子菜单3</a></li> 31 <li><a href="http://www.">子菜单4</a></li> 32 </ul> 33 <ul> 34 <li><a href="http://www." >子菜单q</a></li> 35 <li><a href="http://www.">子菜单s</a></li> 36 <li><a href="http://www." >子菜单d</a></li> 37 <li><a href="http://www." >子菜单f</a></li> 38 </ul> 39 <ul> 40 <li><a href="http://www." >子菜单g</a></li> 41 <li><a href="http://www." >子菜单b</a></li> 42 <li><a href="http://www" >子菜单v</a></li> 43 <li><a href="http://www." >子菜单c</a></li> 44 </ul> 45 <ul> 46 <li><a href="http://www." >子菜单z</a></li> 47 <li><a href="http://www." >子菜单x</a></li> 48 <li><a href="http://www." >子菜单四</a></li> 49 </ul> 50 </div> 51 <script> 52 function $_class(name){ 53 var elements = document.getElementsByTagName("*"); 54 for(s=0;s<elements.length;s++){ 55 if(elements[s].className==name){ 56 return elements[s]; 57 } 58 } 59 } 60 var tabList = $_class("menu_zzjs_net").getElementsByTagName("li") 61 tabCon = $_class("sub_zzjs").getElementsByTagName("ul"); 62 for(i=0;i<tabList.length;i++){ 63 (function(){ 64 var t = i; 65 tabList[t].onmouseover = function(){ 66 for(o=0;o<tabCon.length;o++){ 67 tabCon[o].style.display = "none"; 68 tabList[o].className = ""; 69 if(t==o){ 70 this.className = "this_zzjs"; 71 tabCon[o].style.display = "block"; 72 } 73 } 74 } 75 })() 76 } 77 </script> 78 </body> 79 </html>