                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /導(dǎo)航條菜單的制作

完全沒有頭緒

有沒有做好的，我想?yún)⒖枷?/p>

qq_救救我吧_1

2016-06-25

源自：導(dǎo)航條菜單的制作 5-2

關(guān)注問題我要回答

497

操作

收起

1 回答

慕萊塢9220042 回答被采納 +3 積分
2016-06-25

<!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=utf-8"?/>
<title>導(dǎo)航菜單</title>
<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-size:?14px;?}
a?{?color:?#333;?text-decoration:?none?}
ul?{?list-style:?none;?height:?30px;?border-bottom:?5px?solid?#F60;?margin-top:?20px;?padding-left:?50px;?}
ul?li?{?float:?left?}
ul?li?a?{?display:?block;?height:?30px;?text-align:?center;?line-height:?30px;?width:120px;?background:?#efefef;?margin-left:?1px;?}
a.on,?a:hover?{?background:?#F60;?color:?#fff;?}
</style>
<script>
window.onload=function(){
????var?aA=document.getElementsByTagName('a');
	for(var?i=0;?i<aA.length;?i++){
		aA[i].onmouseover=function(){
			var?This=this;
			clearInterval(This.time);
			This.time=setInterval(function(){
					This.style.width=This.offsetWidth+8+"px";
					if(This.offsetWidth>=160)
					clearInterval(This.time);
				},30)
		}
		aA[i].onmouseout=function(){
				clearInterval(this.time);
				var?This=this;
				this.time=setInterval(function(){
					This.style.width=This.offsetWidth-8+"px";
					if(This.offsetWidth<=120){
						This.style.width='120px';
						clearInterval(This.time);
					}
				},30)
		}
	}
}
</script>
</head>
<body>
<ul>
????<li><a?class="on"?href="#">首　　頁</a></li>
????<li><a?href="#">新聞快訊</a></li>
<li><a?href="#">產(chǎn)品展示</a></li>
????<li><a?href="#">售后服務(wù)</a></li>
????<li><a?href="#">聯(lián)系我們</a></li>
</ul>
</body>
</html>