树形菜单的制作

最新推荐文章于 2021-12-29 11:58:00 发布

青柠Q

最新推荐文章于 2021-12-29 11:58:00 发布

阅读量776

点赞数

本文链接：https://blog.csdn.net/LiuHanQingIT/article/details/30741083

版权

<!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;
	}
.bk_circle{
	list-style:none;
	display:block
	}

</style>
  <script type="text/javascript">
  function dt(ulid){
  var art=document.getElementById(ulid);
  if(art.style.display=="block")	
     { 
       art.style.display="none";
	 }
else
    {
	art.style.display="block";
	}
  }
 /*for(var i=0;i<lis.length;i++){
	lis[i].οnmοuseοver=function() { this.className='bk_circle';}
	lis[i].οnmοuseοut=function() { this.className='no_circle';}

	}*/
 </script>
</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>  
<ul><a href=" javascript:dt('art')"><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
           <li> <img src="images/doc.gif" >小说散文</li>
            <li><img src="images/doc.gif" >诗风词韵</li>
            </ul>
 <ul><a href="javascript:dt('photo') "><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><a href="javascript:dt('home') "><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><a href=" javascript:dt('game')"><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>

青柠Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
树形菜单的制作

制作树形菜单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: mi
复制链接

扫一扫