JS+CSS可隱藏的左側(cè)展開、折疊菜單_菜單導(dǎo)航特效

可隱躲在左側(cè)的折疊展開菜單，鼠標(biāo)放上往就會(huì)展開了，點(diǎn)擊菜單項(xiàng)，會(huì)向下展開子項(xiàng)，這是一個(gè)老外寫的，假如風(fēng)格顏色風(fēng)格你不滿足，可以自己試改CSS樣式表。

<html>
<head>
<title>左側(cè)隱躲菜單</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;/* http://www.hl5o.cn */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 id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px">
      <div id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0">
        <div id="cbtn" class="btninner">源碼下載</div>
        <div class="mtab">
          <table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td onclick="opTab();">論壇社區(qū)</td></tr>
            <tr><td onclick="opTab();">交友會(huì)員</td></tr>
            <tr><td onclick="opTab();">聊天留言</td></tr>
         </table>
        </div>
      </div>
      <div id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1">
        <div id="cbtn" class="btninner">產(chǎn)品及服務(wù)</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();">產(chǎn)品</td></tr>
            <tr><td onclick="opTab();">服務(wù)</td></tr>
          </table>
        </div>
      </div>
      <div id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2">
        <div id="cbtn" class="btninner">網(wǎng)頁(yè)編程</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 id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3">
        <div id="cbtn" class="btninner">WEB開發(fā)</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 id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4">
        <div 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 id="arrow" class="pulltab" onclick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>
    <div id="fr" name="fr" class="fr">
      <h2>左側(cè)的變化菜單</h2>
    </div>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索JS+CSS可隱藏的左側(cè)展開、折疊菜單
特效說(shuō)明：
菜單導(dǎo)航模板-JS+CSS可隱藏的左側(cè)展開、折疊菜單。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

JS+CSS可隱藏的左側(cè)展開、折疊菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

JS+CSS可隱藏的左側(cè)展開、折疊菜單_菜單導(dǎo)航特效