富有弹性的仿QQ导航菜单

更新时间：2009年07月07日点击数：

<!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>
<title>炫浪网设计素材资源站-富有弹性的仿QQ导航菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
body{
	margin:10px;
	padding:10px;
}
body,td,div,span,li{
	font-size:12px;
}
.title01,.title02{
	color:#fff;
	font-weight:bold;
}
#DoorP{
	border:12px solid #eee;
	width:150px;
	height:300px;
	padding:4px;
	background:#fff;
}
.title01{
	width:100%;
	height:25px;
	background:#00ccff;
	cursor:pointer;
}
.title02{
	width:100%;
	height:25px;
	background:#99cc00;
	cursor:pointer;
}
.content{
	background:#eee;
	border-bottom:2px solid #fff;
	overflow:hidden;
	color:#666;
	padding-left:4px;
	padding-right:4px;
	line-height:18px;
}
</style>
</head>
<body>

<div id="DoorP">
	<table>
		<tr>
			<td>炫浪首页</td>
		</tr>
	</table>
	<div class="content">炫浪网，综合类门户网站。专业为您提供：科技，学习，图书，游戏，软件，下载，电影，电视剧，动漫，女性，时尚，社区，素材，壁纸各方面的内容.</div>
	<table>
		<tr>
			<td>资源下载</td>
		</tr>
	</table>
	<div class="content">炫浪资源下载站为你提供各类精品资源下载,其下载内容包括:软件、游戏、高清电影、连续剧、资料、音乐、歌曲、动画、漫画、综艺、体育节目等下载.</div>
	<table>
		<tr>
			<td>游戏频道</td>
		</tr>
	</table>
	<div class="content">炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等...  </div>
</div>
<script type="text/javascript">
	var open = 0;// 设置初始打开的层序号
	var openState = new Array();
	var closeState = new Array();
	var dH = 220;
	function $(id){
		if(document.getElementById(id))
		{
			return document.getElementById(id);
		}
		else
		{
			alert("没有找到！");
		}
	}
	function $tag(id,tagName){
		return $(id).getElementsByTagName(tagName)
	}
	function closeMe(Cid,Oid){				
		var h = parseInt(Ds[Cid].style.height);
		//alert(h);
		if(h > 0)
		{
			h = h - Math.ceil(h/3); 			
			Ds[Cid].style.height = h+"px";
		}
		else
		{			
			openMe(Oid);
			clearTimeout(closeState[Cid]);
			return false;
		}
		closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
	}
	function openMe(Oid){
		var h = parseInt(Ds[Oid].style.height);		
		//alert(h);
		if(h < dH)
		{
			h = h + Math.ceil((dH-h)/3); 			
			Ds[Oid].style.height = h+"px";
		}
		else
		{		
			clearTimeout(openState[Oid]);			
			return false;
		}
		openState[Oid] = setTimeout("openMe("+Oid+")");
	}
	var Ds = $tag("DoorP","div");
	var Ts = $tag("DoorP","table");
	if(Ds.length != Ts.length)
	{
		alert("标题和内容数目不相同！");
	}
	for(var i = 0 ; i < Ds.length ; i++)
	{		
		if(i==open)
		{
			Ds[i].style.height = dH+"px";
			Ts[i].className="title01";
		}
		else
		{
			Ds[i].style.height = "0px";
			Ts[i].className="title02";
		}
		Ts[i].value = i;
		Ts[i].onclick = function(){
			if(open==this.value)
			{
				return false;
			}
			Ts[open].className="title02";
			Ts[this.value].className="title01";
			for(var i = 0 ; i < openState.length ; i++)
			{
				clearTimeout(openState[i]);
				clearTimeout(closeState[i]);
			}
			closeMe(open,this.value);
			//openMe(this.value);
			open = this.value;
		}
	}	
	//直接打开层函数
	function showDiv(id){		
		Ds[id].style.height=dH+"px";
		Ds[open].style.height="0px";
		open = id;
	}
	//渐渐打开层函数
</script>
</body>
</html>

赞助商链接

炫友推荐

炫浪推广

【注意】炫浪网版权所有,未经书面授权禁止模仿风格或建立镜像网站.如有违反,追究法律责任.
【声明】本网站部分内容属社区网友发布，本网站仅提供网友交流平台，但有权在本网站范围内引用、发布、
转载来自社区网友发布的内容。网友发布内容纯属个人行为，与本网站立场无关。本网站对于网友发布的
内容所引发的版权、署名权的异议及纠纷，不承担任何责任。粤ICP备11064832号公安备案编号：4453023010550