灰儿 发表于 2007-12-28 15:44:44

左侧的隐藏菜单，点击后显示下拉分级菜单的内容

&lt;html&gt;<br />&nbsp; &lt;head&gt;<br />&nbsp;&nbsp;&nbsp; &lt;title&gt;web reference&lt;/title&gt;<br />&nbsp;&nbsp;&nbsp; &lt;script language="JavaScript1.2" type="text/javascript"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var maxmnus = 5<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function opTab(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mnu = document.getElementById("menubar")<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var arrdiv = document.getElementById("arrow")<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var arrtxt = document.getElementById("arr")<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if((mnu.style.display != "block") || (mnu.style.display == "")){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mnu.style.display = "block"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arrtxt.innerText = "3";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mnu.style.display = "none"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arrtxt.innerText = "4";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arrdiv.style.pixelLeft = 0;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; event.cancelBubble = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function toggleMenu(el){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i = 0;i &lt; maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(el.status == "closed"){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.status = "open"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById(el.menu).style.display = "block";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.status = "closed"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function toggleSub(e){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el = document.getElementById(e)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(el.status == "closed"){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.style.display = "block";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.status = "open"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.style.display = "none";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el.status = "closed"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; event.cancelBubble = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />&nbsp;&nbsp;&nbsp; &lt;style type="text/css"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #menubar{<br />position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled=&#39;true&#39;,gradientType=&#39;1&#39;,startColorstr=&#39;#2644b2&#39;, endColorstr=&#39;#e7e8f1&#39;);}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .indicator{<br />color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .r1{<br />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=&#39;true&#39;,gradientType=&#39;1&#39;,startColorstr=&#39;#2644b2&#39;, endColorstr=&#39;#e7e8f1&#39;);}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .submenu1{<br />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:10px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled=&#39;true&#39;,gradientType=&#39;1&#39;,startColorstr=&#39;#bec1e4&#39;, endColorstr=&#39;#e7e8f1&#39;);}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .submenu2{<br />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=&#39;true&#39;,gradientType=&#39;1&#39;,startColorstr=&#39;#bec1e4&#39;, endColorstr=&#39;#e7e8f1&#39;);}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .pulltab{<br />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=&#39;true&#39;,gradientType=&#39;1&#39;,startColorstr=&#39;#e7e8f1&#39;, endColorstr=&#39;#2644b2&#39;);}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .inner{<br />height:100%;width:100%;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .mtab{<br />position:relative;top:0px;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .btninner{<br />height:100%;width:100%;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .fr{<br />position:absolute;top:0px;left:35px;}<br />&nbsp;&nbsp;&nbsp; &lt;/style&gt;<br />&nbsp; &lt;/head&gt;<br />&nbsp; &lt;body scroll="no"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="c0" class="r1" onClick="toggleMenu(this)" status="closed" menu="m0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="cbtn" class="btninner"&gt;Behaviors&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="mtab"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td onClick="opTab();"&gt;&lt;a href="<a target=_blank href=&#39;http://www.sq01.cn">DHTML&#39;>http://www.sq01.cn"&gt;DHTML</a> Behaviours&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td onClick="toggleSub(&#39;m0s0&#39;);"&gt;ViewLink Overview&lt;span class="indicator"&gt;6&lt;/span&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m0s0" class="submenu2" align="center" border="0" cellspacing="0" cellpadding="0" status="closed"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td onClick="opTab();"&gt;ViewLink CSS Inheritance&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="c1" class="r1" onClick="toggleMenu(this)" status="closed" menu="m1"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="cbtn" class="btninner"&gt;CSS&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td onClick="opTab();"&gt;css&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td onClick="opTab();"&gt;css&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="c2" class="r1" onClick="toggleMenu(this)" status="closed" menu="m2"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="cbtn" class="btninner"&gt;DHTML&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;DHTML 1&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;DHTML 2&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="c3" class="r1" onClick="toggleMenu(this)" status="closed" menu="m3"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="cbtn" class="btninner"&gt;DOM&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;DOM 1&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;DOM 2&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="c4" class="r1" onClick="toggleMenu(this)" status="closed" menu="m4"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="cbtn" class="btninner"&gt;HTML&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;HTML 1&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;HTML 2&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div id="arrow" class="pulltab" onClick="opTab()"&gt;&lt;table class="inner"&gt;&lt;tr&gt;&lt;td id="arr" valign="middle"&gt;4&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div id="fr" name="fr" class="fr"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;左侧的变化菜单&lt;/h2&gt;<br />&nbsp; &lt;/div&gt;<br />&nbsp; &lt;/body&gt;<br />&nbsp; &lt;/html&gt;<p>［此帖子已被 灰儿 在 2007-12-28 15:51:47 编辑过］
页: [1]
查看完整版本: 左侧的隐藏菜单，点击后显示下拉分级菜单的内容