灰儿 发表于 2007-12-27 16:22:24

左边隐藏的菜单效果

&lt;style&gt;<br />*{margin:0 auto;padding:0 auto}<br />body{font-family:宋体;font-size:12px;background:#000;overflow:hidden;color:#fff}<br />#a1{width:250px;height:100%;position:absolute;top:0px;left:-226px;}<br />#a1 table{width:100%;height:100%;}<br />.a11{list-style-type:none;border:1px solid #555;background:#000}<br />.a_1{width:200px;border:1px solid #555;margin:5px auto;padding:5px 0px 5px 0px;text-align:center}<br />.a_2{width:200px;height:150px;display:none}<br />.a2{width:100%;height:100%;position:absolute;top:0px;left:0px;text-align:center;overflow:auto}<br />.a2_1{width:800px;height:100%;<br />border-left:1px solid #555;<br />border-right:1px solid #555;<br />}<br />&lt;/style&gt;<br />&lt;script languege="javascript"&gt;<br />var jinchu=0<br />var x=-226<br />var disp=1<br />function jj(){<br />if((jinchu&gt;0 &amp;&amp; x==0) || (jinchu&lt;0 &amp;&amp; x==-226)){jinchu=0;return}<br />x+=jinchu<br />a1.style.left = x + "px"<br />setTimeout("jj()",1)<br />}<br />function tan(a){<br />document.getElementById("t"+disp).style.display="none"<br />document.getElementById("t"+a).style.display="block"<br />disp=a<br />}<br />&lt;/script&gt;<br />&lt;div class="a2"&gt;&lt;div class="a2_1"&gt;<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;1<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;2<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;3<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;4<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;1<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;2<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;3<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;4<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;1<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;2<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;3<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;4<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;1<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;2<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;3<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;4<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;1<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;2<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;3<br />&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;4<br />&lt;/div&gt;&lt;/div&gt;<br />&lt;div id="a1"&nbsp; onmouseover="if(jinchu==0){jinchu=2;jj()}else{jinchu=2}" onmouseout="if(jinchu==0){jinchu=-2;setTimeout(&#39;jj()&#39;,1000)}else{jinchu=-2}"&gt;<br />&lt;table&gt;<br />&lt;tr&gt;&lt;td&gt;<br />&lt;div class="a11"&gt;<br />&lt;li&gt;<br />&lt;div class="a_1" onclick="tan(1)"&gt;菜单1&lt;/div&gt;<br />&lt;div class="a_2" id="t1" style="display:block"&gt;&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br />&lt;div class="a_1" onclick="tan(2)"&gt;菜单2&lt;/div&gt;<br />&lt;div class="a_2" id="t2"&gt;&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br />&lt;div class="a_1" onclick="tan(3)"&gt;菜单3&lt;/div&gt;<br />&lt;div class="a_2" id="t3"&gt;&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br />&lt;div class="a_1" onclick="tan(4)"&gt;菜单4&lt;/div&gt;<br />&lt;div class="a_2" id="t4"&gt;&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br />&lt;div class="a_1" onclick="tan(5)"&gt;菜单5&lt;/div&gt;<br />&lt;div class="a_2" id="t5"&gt;&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;div&gt;<br />&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/div&gt;
页: [1]
查看完整版本: 左边隐藏的菜单效果