CSS+JS竖向折叠菜单

2024-09-05 12:19:37

字体：大中小

来源：转载

供稿：网友

CSS+JS竖向折叠菜单，像WINDOWS资源管理器左侧的菜单一样，点击菜单的标题，会展开本组的所有菜单项，再次点击则关闭菜单，菜单项是基于CSS，因些接近标准菜单，还不错吧？

<html><head><title>折叠菜单</title><style type="text/css">.mainDiv{  width:160px;}.topItem{  width:160px;  height:22px;  cursor:pointer;  background: #467BF2;  text-decoration: none;  color: white;  }.dropMenu{  background:#D9D9D9;  border-top:1px solid #467BF2;  border-left:1px solid #92B1F8;  border-right:1px solid #92B1F8;  border-bottom:1px solid #92B1F8;}.subMenu{   display:none;}.subItem{   padding-left:5px;   cursor:pointer;   font-weight:bold;   text-decoration:none;   color:black;}.subItem a{   text-decoration:none;   color:black;}.subItemOver{   cursor:pointer;   color:blue;   text-decoration:underline;   font-weight:bold;   padding-left:5px;}.subItemOver  a{   color:blue;}.drop{   border-left:1px solid black;   border-right:1px solid black; }</style><script language="javascript">var TIMER_SLIDE = null;var OBJ_SLIDE;var OBJ_VIEW;var PIX_SLIDE = 10;var NEW_PIX_VAL;var DELAY_SLIDE = 30; var DIV_HEIGHT = 22; //value irrelevantvar SUB_MENU_NUM =0;var RE_INIT_OBJ = null;var bMenu = document.getElementById("curMenu");var MainDiv,SubDivdocument.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')function Init(objDiv){ if (TIMER_SLIDE == null){SUB_MENU_NUM = 0;MainDiv = objDiv.parentNode;SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);SubDiv.onclick = SetSlide;OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML    DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code        for (i=0;i<OBJ_VIEW.childNodes.length;i++)        {            if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")            {                SUB_MENU_NUM ++;                OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;                OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;            }        }           NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"));     }}function SetSlide(){      if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code      if (TIMER_SLIDE == null  &&  this.parentNode == MainDiv)            TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);      else      {          RE_INIT_OBJ = this;          setTimeout('ReInit()', 200);      }}function ReInit(obj){    Init(RE_INIT_OBJ);    TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);    RE_INIT_OBJ = null;}function RunSlide(){    if (OBJ_VIEW.getAttribute("state") == 0)    {        NEW_PIX_VAL += PIX_SLIDE;        OBJ_SLIDE.style.height = NEW_PIX_VAL;        if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code        {            clearInterval(TIMER_SLIDE);            TIMER_SLIDE = null;            OBJ_VIEW.style.display = 'inline';            OBJ_VIEW.setAttribute("state","1")            MainDiv.setAttribute("state",NEW_PIX_VAL);        }    } else    {        OBJ_VIEW.style.display = 'none';        NEW_PIX_VAL -= PIX_SLIDE;                if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;        if (NEW_PIX_VAL <= 0)        {            NEW_PIX_VAL = 0;            OBJ_SLIDE.style.height = NEW_PIX_VAL            clearInterval(TIMER_SLIDE);            TIMER_SLIDE = null;            OBJ_VIEW.setAttribute("state","0")            MainDiv.setAttribute("state",NEW_PIX_VAL);        }    }}function ChangeStyle(){    if (this.className == this.getAttribute("classOut"))        this.className = this.getAttribute("classOver");    else        this.className = this.getAttribute("classOut");}</script></head><body><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" >网页特效</div>        <div class="dropMenu" > <div class="subMenu" state="0">  <span class="subItem" classOut="subItem" classOver="subItemOver">菜单导航</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">层和布局</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">文字效果</span> </div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >源码下载</div>        <div class="dropMenu" > <div class="subMenu" state="0">  <span class="subItem" classOut="subItem" classOver="subItemOver">ASP源码</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">PHP源码</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">AJAX源码</span> </div></div></div><BR /><div class="mainDiv" state="0"><div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网络编程</div>        <div class="dropMenu" > <div class="subMenu" state="0">  <span class="subItem" classOut="subItem" classOver="subItemOver">网页设计</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">艺术创作</span><BR />  <span class="subItem" classOut="subItem" classOver="subItemOver">电脑网络</span>  </div></div></div></body></html>

上一篇：动画效果慢慢放大的菜单

下一篇：CSS制作的中英文双语菜单