简单树形菜单_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:34:281451浏览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>制作简单的树形菜单</title><style type="text/css">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" alt="简单树形菜单_html/css_WEB-ITnose" ><font color="#009900">树形菜单：</font></b> <a href="javascript:onclick=show() "><img src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >文学艺术</a> <ul id="art" class="no_circle"> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >先锋写作</li> <li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >小说散文</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >诗风词韵</li> </ul> <a href="javascript:onclick=show2() "> <img src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >贴图专区</a> <ul id="tietu" class="no_circle"> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >真我风采</li> <li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >视屏贴图</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >行行摄摄</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >Flash贴图</li> </ul> <a href="javascript:onclick=show3() "> <img src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >房产论坛</a> <ul id="fangchan" class="no_circle"> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >我要买房</li> <li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >我要卖房</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >租房心语</li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >二手市场</li> </ul> <a href="javascript:onclick=show4() "> <img src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >娱乐八卦</a> <ul id="yule" class="no_circle"> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >红楼一梦</li> <li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >笑话论坛</li> <li><img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >休闲生活</li> <img src="images/doc.gif" alt="简单树形菜单_html/css_WEB-ITnose" >大话春秋</li> </ul> </body></html>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn