JS+CSS实现经典的左侧竖向滑动菜单效果

2019-11-20 11:31:53

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果。分享给大家供大家参考。具体如下：

这是一款经过改造的左侧竖向滑动菜单，基于JavaScript+CSS，没有过多的修饰，主要想实现菜单的动画效果，想用的朋友，自己美化吧。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-css-jd-left-v-hd-menu-style-codes/

具体代码如下：

<!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 class="curved">  <b class="b1 c1"></b>  <b class="b2 c2"></b>  <b class="b3 c3"></b>  <b class="b4 c4"></b>  <div class="boxcontent"> <div id="DoorP"> <table> <tr>  <td align="center">   第一层信息  </td> </tr> </table> <div class="content" align="center"> <a href="#">二层</a><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"> <a href="#">二层</a><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"> <a href="#">二层</a><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>

希望本文所述对大家的JavaScript程序设计有所帮助。

上一篇：jQuery实现的经典竖向伸缩菜单效果代码

下一篇：直接拿来用的15个jQuery代码片段