可伸缩的导航菜单

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

<html>
<head>
<title>炫浪设计素材-可伸缩的导航菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
.main{
	overflow:hidden;
	border:1px solid #000;
	width:300px;
	background:#eee;
	height:40px;
}
.main h4{
	height:30px;
	line-height:40px;
	display:block;
	background:#999;
	color:#fff;
	font-weight:bold;
	cursor: pointer;
	padding-left:10px;
}
.main p{
	line-height:20px;
	padding:10px;
}
</style>
 <script language="JavaScript" type="text/javascript">
	function $(id){return document.getElementById(id)}
	function $s(obj){return parseInt(obj.style.height||obj.currentStyle.height)}
	var nowNum,oldNum,moveNum=0,timer,addH=10,speed=2,minH=40;
	function moon(e){
		if (moveNum>0)return false
		if (e==oldNum){
			moveNum++
			timer=setInterval(eClose,speed);
		}
		else{
			moveNum++
			nowNum=e;
			timer=setInterval(boon,speed);
		}
	}
	function eClose(){
			var oldObjMenu = $("aa"+oldNum);
			var oldObjMenuHeight = $s(oldObjMenu);
			if(oldObjMenuHeight>minH){
				oldObjMenu.style.height=(oldObjMenuHeight-addH)+"px";
			}
			else{clearInterval(timer);oldObjMenu.style.height=minH+"px";oldNum=null;moveNum=0;
			}
	}
	function boon(){
		var nowObjMenu = $("aa"+nowNum);
		var nowObjCon = $("bb"+nowNum);
		var nowObjMenuHeight = $s(nowObjMenu);
		if(nowObjMenuHeight<=nowObjCon.offsetHeight){
			nowObjMenu.style.height=(nowObjMenuHeight+addH)+"px";
		}
		else{moveNum++
		}
		if (nowNum!=oldNum && oldNum){
			var oldObjMenu = $("aa"+oldNum);
			var oldObjMenuHeight = $s(oldObjMenu);
			if(oldObjMenuHeight>minH){
				oldObjMenu.style.height=(oldObjMenuHeight-addH)+"px";
			}
			else{oldObjMenu.style.height=minH+"px";moveNum++
			}
		}
		if (moveNum>=3){
			clearInterval(timer);oldNum=nowNum;moveNum=0;
		}
	}
</script>
</head>
<body>

<div id="aa1" class="main">
	<div id="bb1">
		<h4 onclick="moon(1)">点这里可以展开和收缩</h4>
		<p>
炫浪网设计素材资源站为您提供:flash大图代码,图片变换代码,图片切换代码,网页特效代码,滑动门代码!		</p>
	</div>
</div>
<div id="aa2" class="main">
	<div id="bb2">
		<h4 onclick="moon(2)">点这里可以展开和收缩</h4>
		<p>
炫浪网设计素材资源站为您提供:flash大图代码,图片变换代码,图片切换代码,网页特效代码,滑动门代码!		</p>
	</div>
</div>
<div id="aa3" class="main">
	<div id="bb3">
		<h4 onclick="moon(3)">点这里可以展开和收缩</h4>
		<p>
炫浪网设计素材资源站为您提供:flash大图代码,图片变换代码,图片切换代码,网页特效代码,滑动门代码!		</p>
	</div>
</div>
<div id="aa4" class="main">
	<div id="bb4">
		<h4 onclick="moon(4)">点这里可以展开和收缩</h4>
		<p>
炫浪网设计素材资源站为您提供:flash大图代码,图片变换代码,图片切换代码,网页特效代码,滑动门代码!		</p>
	</div>
</div>
<div id="aa5" class="main" >
	<div id="bb5">
		<h4 onclick="moon(5)">点这里可以展开和收缩</h4>
		<p>
炫浪网设计素材资源站为您提供:flash大图代码,图片变换代码,图片切换代码,网页特效代码,滑动门代码!		</p>
	</div>
</div> 
</body>
</html>

赞助商链接

炫友推荐

炫浪推广

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