CSS之简单树形菜单 

<!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="All.gif"><font color="#009900">树形菜单：</font></b>  
<a href="javascript:onclick=show() "><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">文学艺术</a>
        <ul id="art" class="no_circle">
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">先锋写作</li>
           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif" >小说散文</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif" >诗风词韵</li>
         </ul>
         
<a href="javascript:onclick=show2() ">
          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">贴图专区</a>
        <ul id="tietu" class="no_circle">
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">真我风采</li>
           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">视屏贴图</li>
           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">行行摄摄</li>
           <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">Flash贴图</li>
         </ul>
          
    <a href="javascript:onclick=show3() ">
          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">房产论坛</a>
        <ul id="fangchan" class="no_circle">
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">我要买房</li>
           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">楼市话题</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">我要卖房</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">租房心语</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">二手市场</li>
         </ul> 
          
          <a href="javascript:onclick=show4() ">
          <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_mbi_024.gif">娱乐八卦</a>
        <ul id="yule" class="no_circle">
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">红楼一梦</li>
           <li> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">楼市话题</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">笑话论坛</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">休闲生活</li>
            <li><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_folder_open.gif">大话春秋</li>
         </ul>     
          
</body>
</html>

 

posted @ 2015-11-01 09:26  冷的锋刃  阅读(1463)  评论(0)    收藏  举报