树状菜单的运用

来源：互联网发布：网络直播平台怎么赚钱编辑：程序博客网时间：2024/06/04 20:37

树状菜单的运用
<!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;
}
.no_circle{
   list-style:none;
   display:none;
}
</style>
<script type="text/javascript">
window.onload =function(){
var arts=document.getElementById("arts");
arts.onclick= function(){
  if(document.getElementById("art").style.display=="block"){
   document.getElementById("art").style.display="none";

   }else{
    art.style.display="block";
    }
  }
  var photos=document.getElementById("photos");
  var photo=document.getElementById("photo");
      photos.onclick=function(){
   if(photo.style.display=="block"){
    photo.style.display="none";

    }else{
      photo.style.display="block";

     }

   }
  var homes=document.getElementById("homes");
  var home=document.getElementById("home");
      homes.onclick=function(){
   if(home.style.display=="block"){
    home.style.display="none";

    }else{
      home.style.display="block";

     }

   }
  var games=document.getElementById("games");
  var game=document.getElementById("game");
      games.onclick=function(){
   if(game.style.display=="block"){
    game.style.display="none";

    }else{
      game.style.display="block";

     }

   }

}

</script>

</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul id="arts"><a href="#"><img src="images/fclose.gif">文学艺术</a></ul>
<ul class="no_circle" id="art">
           <li><img src="images/doc.gif" >先锋写作</li>
           <li> <img src="images/doc.gif" >小说散文</li>
            <li><img src="images/doc.gif" >诗风词韵</li>
            </ul>
<ul id="photos"><a href="#"><img src="images/fclose.gif">贴图专区</a></ul>
<ul id="photo" class="no_circle">
           <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>
<ul id="homes"><a href="#"><img src="images/fclose.gif">房产论坛</a></ul>
<ul id="home" class="no_circle">
           <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>
            <li><img src="images/doc.gif" >二手市场</li>
            </ul>
<ul id="games"><a href="#"><img src="images/fclose.gif">娱乐八卦</a></ul>
<ul id="game" class="no_circle">
           <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>
            </ul>
</body>
</html>

0 0