經過改造的左側豎向滑動菜單

2024-09-05 12:20:33

字體：大中小

來源：轉載

供稿：網友

經過改造的左側豎向滑動菜單，基于JavaScript+CSS，沒有過多的修飾，主要想實現菜單的動畫效果，想用的朋友，自己美化吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml"><title>經過改造的左側豎向滑動菜單</title><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;}.curved {   width:202px;   } .curved .b1, .curved .b2, .curved .b3, .curved .b4 {   font-size:1px;   display:block;   background:#FFFCF2; overflow: hidden; } .curved .b1, .curved .b2, .curved .b3 {   height:1px;   } .curved .b2, .curved .b3, .curved .b4 {   background:#FFFCF2;   border-left:1px solid #C7BC98;   border-right:1px solid #C7BC98;   } .curved .b1 {   margin:0 4px;   background:#C7BC98;   } .curved .b2 {   margin:0 2px;   border-width:0 2px;   } .curved .b3 {   margin:0 1px;   } .curved .b4 {   height:2px;   margin:0;   } .curved .c1 {   margin:0 5px;   background:#C7BC98;   } .curved .c2 {   margin:0 3px;   border-width:0 2px;   } .curved .c3 {   margin:0 2px;   } .curved .c4 {   height:2px;   margin: 0 1px;   } .curved .boxcontent {   display:block;   background:transparent;   border-left:1px solid #C7BC98;   border-right:1px solid #C7BC98;   font-size:0.9em;   text-align:justify;   } </style><div   id="70qarhlowxag"   class="curved">  <b class="b1 c1"></b>  <b class="b2 c2"></b>  <b class="b3 c3"></b>  <b class="b4 c4"></b>   <div   id="70qarhlowxag"   class="boxcontent"> <div   class="70qarhlowxag"   id="DoorP"> <table>  <tr>   <td align="center">     第一層信息   </td>  </tr> </table> <div   id="70qarhlowxag"   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   id="70qarhlowxag"   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   id="70qarhlowxag"   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))  {   return document.getElementById(id);  }  else  {   alert("沒有找到!");  } } 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";  }  else  {        openMe(Oid);   clearTimeout(closeState[Cid]);   return false;  }  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } 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+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) {  alert("標題和內容數目不相同!"); }  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";  }  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]);   }   closeMe(open,this.value);   //openMe(this.value);   open = this.value;  } }  function showDiv(id){    Ds[id].style.height=dH+"px";  Ds[open].style.height="0px";  open = id; }</script>

上一篇：一級橫向滑動，二級豎向下拉綜合菜單

下一篇：漂亮淡藍色滑動門代碼