javascript與css打造圓角豎型滑動菜單代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">body{ margin:10px; padding:10px;}a:link { text-decoration: none;color: blue}a:active { text-decoration:blink}a:hover { text-decoration:underline;color: red}a:visited { text-decoration: none;color: green}body,td,div,span,li{ font-size:12px;}.title01,.title02{ color:#00b; font-weight:bold;}#DoorP{ width:200px; height:300px; padding:0px; background:#FFFCF2;}.title01{ width:100%; height:25px; background:#FFFCF2; cursor:pointer;}.title02{ width:100%; height:25px; background:#FFFCF2; cursor:pointer;}.content{ background:#FFFCF2; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px;}.www_zzjs_net { width:202px; }.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { font-size:1px; display:block; background:#FFFCF2;overflow: hidden;}.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3 { height:1px; }.www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { background:#FFFCF2; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; }.www_zzjs_net .b1 { margin:0 4px; background:#C7BC98; }.www_zzjs_net .b2 { margin:0 2px; border-width:0 2px; }.www_zzjs_net .b3 { margin:0 1px; }.www_zzjs_net .b4 { height:2px; margin:0; }.www_zzjs_net .c1 { margin:0 5px; background:#C7BC98; }.www_zzjs_net .c2 { margin:0 3px; border-width:0 2px; }.www_zzjs_net .c3 { margin:0 2px; }.www_zzjs_net .c4 { height:2px; margin: 0 1px; }.www_zzjs_net .zzjs_net { display:block; background:transparent; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; font-size:0.9em; text-align:justify; }</style></head><body>站長特效網,以品質為核心,以實用為目的,打造一流網頁特效站!,站長js特效。<hr><!--歡迎來到站長特效網,我們網站收集大量高品質js特效,提供許多廣告代碼下載,網址:www.,zzjs@msn.com,用.net打造靚站--><div class="www_zzjs_net"> <b class="b1 c1"></b> <b class="b2 c2"></b> <b class="b3 c3"></b> <b class="b4 c4"></b> <div class="zzjs_net"><div id="DoorP"> <table> <tr> <td align="center"> 站長特效一號 </td> </tr> </table> <div class="content" align="center"> 站長特效一號菜單<br/> 站長特效二號菜單<br/> 站長特效三號菜單<br/> </div> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <table> <tr> <td align="center"> 站長特效二號 </td> </tr> </table><div class="content" align="center"> 站長特效一號菜單<br/> 站長特效二號菜單<br/> 站長特效三號菜單<br/> </div> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <table> <tr> <td align="center"> 站長特效三號 </td> </tr> </table><div class="content" align="center"> 站長特效一號菜單<br/> 站長特效二號菜單<br/> 站長特效三號菜單<br/> </div></div></div> <b class="b4 c4"></b> <b class="b3 c3"></b> <b class="b2 c2"></b> <b class="b1 c1"></b><script type="text/javascript"> var open = 2; var openState = new Array(); var closeState = new Array(); var dH = 220; function $(id){ if(document.getElementById(id)) {//歡迎來到站長特效網,我們的網址是www.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 return document.getElementById(id); }//歡迎來到站x長特效網,我們的網址是www.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 else { alert("沒有找到!"); } }//歡迎來到站長x特效網,我們的網址是www.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 function $tag(id,tagName){ return $(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 2) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; }//歡迎來到站長特x效網,我們的網址是www.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); }//歡迎來到站長特效x網,我們的網址是www.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); }//歡迎來到站長特效網,我們的網址是w ww.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("標題和內容數目不相同!"); }//歡迎來到站長特效網,我們的網址是ww w.,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; }//歡迎來到站長特效網,我們的網址是www .,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 Ts[i].value = i; Ts[i].onclick = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); }//歡迎來到站長特效網,我們的網址是www. ,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 closeMe(open,this.value); //openMe(this.value); open = this.value; } }//歡迎來到站長特效網,我們的網址是www.zzj s.net,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。 function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; }//歡迎來到站長特效網,我們的網址是www.zzjs.ne t,很好記,zz站長,js就是js特效,本站收集大量高品質js代碼,還有許多廣告代碼下載。</script></div></body></html></td> </tr></table>
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.