纵向折叠菜单代码，带有平滑的展开、收缩效果

发布时间：2018-08-16 04:24:41 所属栏目：政策来源：站长网

导读：一款纵向（竖直）的折叠菜单代码，带有平滑的展开、收缩效果。无 jQuery 插件，完全 Java Script代码实现，没有过多修饰，有兴趣的美化一下，肯定是款不错的折叠菜单。演示代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://ww

　　一款纵向（竖直）的折叠菜单代码，带有平滑的展开、收缩效果。无jQuery插件，完全JavaScript代码实现，没有过多修饰，有兴趣的美化一下，肯定是款不错的折叠菜单。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="html/txt; charset=utf-8" /> <title>光滑展开合拢的Js菜单效果</title> <style> *{margin:0;padding:0;} ul,li{list-style:none;} #con{width:164px; margin:50px auto 0;} #con h4.top{ height:4px; width:164px; overflow:hidden;} #con h4.bottom{height:4px; width:164px;overflow:hidden;} #con div{height:0px; overflow:hidden;} #con h3{border-top:2px solid #fff; border-bottom:1px solid #D6EFFF;} </style> <script language="javascript"> var speed = 30; var oCon = null; var oH3List = null; var oDivList = null; var oUlList = null; var oldNum = null; var clickNum = null; var hideTimer=null; var showTimer=null; window.onload=function(){ oCon = document.getElementById("con"); oH3List = oCon.getElementsByTagName("h3"); oUlList = oCon.getElementsByTagName("ul"); oDivList = oCon.getElementsByTagName("div"); for(var i=0;i<oUlList.length;i++){ oH3List[i].xuhao=i; oH3List[i].onclick=function(){ clickNum =this.xuhao; changeCatalog(); }; } } function changeCatalog(){ var old_num_2,click_num_2; old_num_2 = null; click_num_2= null; if(oldNum==null){ click_Num_2=clickNum; showTimer = setInterval("showUl("+click_Num_2+")",speed); }else if(oldNum == clickNum){ old_num_2=oldNum; hideTimer = setInterval("hideUl("+old_num_2+")",speed); }else{ old_num_2=oldNum; click_num_2=clickNum; hideTimer = setInterval("hideUl("+old_num_2+")",speed); showTimer = setInterval("showUl("+click_num_2+")",speed); } } function showUl(num){ var move_num1 =Math.ceil((oUlList[num].offsetHeight-oDivList[num].offsetHeight)/10); if(move_num1>=1){ oDivList[num].style.height = oDivList[num].offsetHeight+move_num1+"px"; }else{ oldNum=num; clearInterval(showTimer); } } function hideUl(num){ var move_num2=Math.ceil((oDivList[num].offsetHeight)/10); if(move_num2>0){ oDivList[num].style.height=oDivList[num].offsetHeight -move_num2+"px"; }else{ clearInterval(hideTimer); if(clickNum==num){ oldNum=null; } } } </script> </head> <body> <div id="con"> <h4 class="top"></h4> <h1></h1> <h3>设计素材</h3> <div> <ul> <li>精品图标</li> <li>图片幻灯</li> <li>网页播放器</li> </ul> </div> <h3>模板素材</h3> <div> <ul> <li>企业网站</li> <li>儿童网站</li> <li>音乐网站</li> <li>Discuz模板</li> </ul> </div> <h3>烈火学院</h3> <div> <ul> <li>jQuery</li> <li>Ajax</li> <li>PHP</li> </ul> </div> <h3>网页特效</h3> <div> <ul> <li>菜单</li> <li>表单</li> <li>浏览器</li> </ul> </div> <h4 class="bottom"></h4> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：徐州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!