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   class="pmdfwcm"   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   id="fdfacml"   class="mainDiv" state="0"><div   id="bvmhjpz"   class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" >網頁特效</div>        <div   id="xcegqwn"   class="dropMenu" > <div   id="vpvxdyi"   class="subMenu" state="0">  <span id="rprmscb"    class="subItem" classOut="subItem" classOver="subItemOver">菜單導航</span><BR />  <span id="zdctdyi"    class="subItem" classOut="subItem" classOver="subItemOver">層和布局</span><BR />  <span id="tntvmon"    class="subItem" classOut="subItem" classOver="subItemOver">文字效果</span> </div></div></div><BR /><div   id="zmhnpgm"   class="mainDiv" state="0"><div   id="chrxsnb"   class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >源碼下載</div>        <div   id="otvxvut"   class="dropMenu" > <div   id="xcpdjlz"   class="subMenu" state="0">  <span id="rlvtznm"    class="subItem" classOut="subItem" classOver="subItemOver">ASP源碼</span><BR />  <span id="disyeoj"    class="subItem" classOut="subItem" classOver="subItemOver">PHP源碼</span><BR />  <span id="cwroxwv"    class="subItem" classOut="subItem" classOver="subItemOver">AJAX源碼</span> </div></div></div><BR /><div   id="glrxhrb"   class="mainDiv" state="0"><div   id="hblntsc"   class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >網絡編程</div>        <div   id="zevxddy"   class="dropMenu" > <div   id="bgmvmhn"   class="subMenu" state="0">  <span id="ajpgxwr"    class="subItem" classOut="subItem" classOver="subItemOver">網頁設計</span><BR />  <span id="ydyavbw"    class="subItem" classOut="subItem" classOver="subItemOver">藝術創作</span><BR />  <span id="zegxzcx"    class="subItem" classOut="subItem" classOver="subItemOver">電腦網絡</span>  </div></div></div></body></html>

上一篇：動畫效果慢慢放大的菜單

下一篇：CSS制作的中英文雙語菜單