JS+CSS可隱藏的左側展開、折疊菜單

2024-09-05 12:19:17

字體：大中小

來源：轉載

供稿：網友

可隱藏在左側的折疊展開菜單，鼠標放上去就會展開了，點擊菜單項，會向下展開子項，這是一個老外寫的，如果風格顏色風格你不滿意，可以自己試改CSS樣式表。

<html><head><title>左側隱藏菜單</title>    <script language="JavaScript1.2" type="text/javascript">      var maxmnus = 5      function opTab(){        var mnu = document.getElementById("menubar")        var arrdiv = document.getElementById("arrow")        var arrtxt = document.getElementById("arr")        if((mnu.style.display != "block") || (mnu.style.display == "")){          mnu.style.display = "block"          arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)          arrtxt.innerText = "3";        } else {          mnu.style.display = "none"          arrtxt.innerText = "4";          arrdiv.style.pixelLeft = 0;        }        event.cancelBubble = true;      }      function toggleMenu(el){        for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";        if(el.status == "closed"){          el.status = "open"          document.getElementById(el.menu).style.display = "block";        } else {          el.status = "closed"        }      }      function toggleSub(e){        el = document.getElementById(e)        if(el.status == "closed"){          el.style.display = "block";          el.status = "open"        } else {          el.style.display = "none";          el.status = "closed"        }                event.cancelBubble = true;      }    </script><style type="text/css">#menubar{position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:12px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}.indicator{color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;} .r1{position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1 2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px outset;border-bottom:#e7e8f1 2px outset;padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');} .submenu1{position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3 2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px inset;border-bottom:#e0f8e3 2px inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:12px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}  .submenu2{position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3 3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px groove;border-bottom:#e0f8e3 3px groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');} .pulltab{position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');}.inner{height:100%;width:100%;}.mtab{position:relative;top:0px;.btninner{height:100%;width:100%;} .fr{position:absolute;top:0px;left:30px;}</style></head><body scroll="no">    <div   class="c4coas6"   id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px">      <div   class="g2icg4u"   id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0">        <div   class="q2m4i64"   id="cbtn" class="btninner">精品程序</div>        <div   id="sm4q4i4"   class="mtab">          <table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">            <tr><td onclick="opTab();">論壇社區</td></tr>            <tr><td onclick="opTab();">交友會員</td></tr>            <tr><td onclick="opTab();">聊天留言</td></tr>         </table>        </div>      </div>      <div   class="4k44446"   id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1">        <div   class="cui4e2q"   id="cbtn" class="btninner">產品服務</div>        <div>          <table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">            <tr><td onclick="opTab();">新聞</td></tr>            <tr><td onclick="opTab();">產品</td></tr>            <tr><td onclick="opTab();">服務</td></tr>          </table>        </div>      </div>      <div   class="m44i6ui"   id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2">        <div   class="yws4i4c"   id="cbtn" class="btninner">網頁編程</div>        <div>          <table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">            <tr><td>XML</td></tr>            <tr><td>AJAX</td></tr>            <tr><td>JQUERY</td></tr>          </table>        </div>      </div>      <div   class="wwoew4i"   id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3">        <div   class="4q4qwmy"   id="cbtn" class="btninner">WEB開發</div>        <div>          <table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">            <tr><td>ASP</td></tr>            <tr><td>PHP</td></tr>            <tr><td>JSP</td></tr>          </table>        </div>      </div>      <div   class="4c4uago"   id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4">        <div   class="aoikw4g"   id="cbtn" class="btninner">演示</div>        <div>          <table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">            <tr><td>MENU 1</td></tr>            <tr><td>MENU 2</td></tr>            <tr><td>MENU 3</td></tr>          </table>        </div>      </div>    </div>    <div   class="mkwyu4g"   id="arrow" class="pulltab" onclick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>    <div   class="umqae4k"   id="fr" name="fr" class="fr">      <h2>左側的變化菜單</h2></div></body></html>

上一篇：圓角豎向的CSS折疊菜單

下一篇：自適應寬度的CSS圓角背景的菜單按鈕