延時消失的菜單

<script>
window.οnlοad=function () {
	var oUl=document.getElementsByTagName("ul")[0];
	var oLi=document.getElementsByTagName("li");
	var timer=null;
	var old=0;

	function on() {
		timer=setInterval(function () {
			(old==oLi.length-1) ? (old=0) : (old++);
			b(old);
		},1000);
	}
	function b(old) {
		for(var i=0 ;i<oLi.length;i++){
			oLi[i].className='';
			oLi[i].getElementsByTagName("div")[0].className='';
		}
		oLi[old].className='active';
		oLi[old].getElementsByTagName("div")[0].className='on';
	}
	on();
	oUl.οnmοuseοver=function () {
		clearInterval(timer);
	};
	oUl.οnmοuseοut=on;

}
</script>
<div class="bg">
	<ul class="clearfix">
		<li  class="active" >
			<a href="javascript:">首頁</a>
			<div class="on" >
				<a href="javascript:">首頁</a>
			</div>
		</li>
		<li>
			<a href="javascript:">關於我們</a>
			<div>
				<a href="javascript:">關於我們</a>
			</div>
		</li>
		<li>
			<a href="javascript:">作品</a>
			<div>
				<a href="javascript:">作品</a>
			</div>
		</li>
		<li>
			<a href="javascript:">博客</a>
			<div>
				<a href="javascript:">博客</a>
			</div>
		</li>
	</ul>
</div>
<style>
	.clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; }
	.clearfix{zoom: 1;}
	*{padding: 0; margin: 0;}
	a{text-decoration: none;color: #fff;}
	.bg{
		width: 500px;
		margin: 100px auto;
	}
	ul{
		width: 500px;
		list-style: none;
		background: linear-gradient(top,#739cbd,#215a9c);
		background: -webkit-linear-gradient(top,#739cbd,#215a9c);
		background: -moz-linear-gradient(top,#739cbd,#215a9c);
	}
	ul li{
		position: relative;
		float: left;
		padding: 5px 5px;
		border-right: 1px solid #fff;
		text-align: center;
	}
	ul li>a{
		display: inline-block;
		padding: 5px 10px;
	}
	.active>a{
		background:#84a5c6 ;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		text-align: center;
	}
	li>div{
		position: absolute;
		top: 40px;
		left: 0;
		background: #fff;
		border: 1px solid #e6e6e6;
		display: none;
	}
	li>div>a{
		color: blue;
		font-size: 12px;
		padding: 5px 10px;
	}
	.on{
		display: block;
	}
</style>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章