你的位置:首页 > 网页设计

[网页设计]简单树形菜单


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html body{font-size:13px;   line-height:20px;   }a{font-size: 13px; color: #000000; text-decoration: none; }a:hover{font-size:13px;    color: #ff0000;    }img {  vertical-align: middle;  border:0;  list-style-type: none;}.no_circle{list-style-type:none; /*设置列表项标志的类型为无*/  display:none;  }</style><script type="text/javascript">function show(){if(document.getElementById("art").style.display=='block'){  document.getElementById("art").style.display='none';   //触动的ul如果处于显示状态,即隐藏 }else{  document.getElementById("art").style.display='block';   //触动的ul如果处于隐藏状态,即显示  }}function show2(){if(document.getElementById("tietu").style.display=='block'){  document.getElementById("tietu").style.display='none';   //触动的ul如果处于显示状态,即隐藏 }else{  document.getElementById("tietu").style.display='block';   //触动的ul如果处于隐藏状态,即显示  }}function show3(){if(document.getElementById("fangchan").style.display=='block'){  document.getElementById("fangchan").style.display='none';   //触动的ul如果处于显示状态,即隐藏 }else{  document.getElementById("fangchan").style.display='block';   //触动的ul如果处于隐藏状态,即显示  }}function show4(){if(document.getElementById("yule").style.display=='block'){  document.getElementById("yule").style.display='none';   //触动的ul如果处于显示状态,即隐藏 }else{  document.getElementById("yule").style.display='block';   //触动的ul如果处于隐藏状态,即显示  }}</script></head><body><b><img src="images/fold.gif"><font color="#009900">树形菜单:</font></b> <a href="javascript:onclick=show() "><img src="images/fclose.gif">文学艺术</a>    <ul id="art" >      <li><img src="images/doc.gif" >先锋写作</li>      <li> <img src="images/doc.gif" >小说散文</li>      <li><img src="images/doc.gif" >诗风词韵</li>     </ul>    <a href="javascript:onclick=show2() ">     <img src="images/fclose.gif">贴图专区</a>    <ul id="tietu" >      <li><img src="images/doc.gif" >真我风采</li>      <li> <img src="images/doc.gif" >视屏贴图</li>      <li><img src="images/doc.gif" >行行摄摄</li>      <li><img src="images/doc.gif" >Flash贴图</li>     </ul>       <a href="javascript:onclick=show3() ">     <img src="images/fclose.gif">房产论坛</a>    <ul id="fangchan" >      <li><img src="images/doc.gif" >我要买房</li>      <li> <img src="images/doc.gif" >楼市话题</li>      <li><img src="images/doc.gif" >我要卖房</li>      <li><img src="images/doc.gif" >租房心语</li>      <img src="images/doc.gif" >二手市场</li>     </ul>          <a href="javascript:onclick=show4() ">     <img src="images/fclose.gif">娱乐八卦</a>    <ul id="yule" >      <li><img src="images/doc.gif" >红楼一梦</li>      <li> <img src="images/doc.gif" >楼市话题</li>      <li><img src="images/doc.gif" >笑话论坛</li>      <li><img src="images/doc.gif" >休闲生活</li>      <img src="images/doc.gif" >大话春秋</li>     </ul>       </body></html>