Home >Web Front-end >HTML Tutorial >简单树形菜单_html/css_WEB-ITnose

简单树形菜单_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:34:281500browse

<!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>

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn