导航条的制作——水平伸缩
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>导航菜单</title> 6 <style type="text/css"> 7 * { margin: 0; padding: 0; font-size: 14px; } 8 a { color: #333; text-decoration: none } 9 ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; } 10 ul li { float: left } 11 ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; } 12 a.on, a:hover { background: #F60; color: #fff; } 13 </style> 14 <script> 15 window.onload=function(){ 16 var aA=document.getElementsByTagName('a'); 17 for(var i=0; i<aA.length; i++){ 18 aA[i].onmouseover=function(){ 19 var This=this; 20 clearInterval(This.time); 21 This.time=setInterval(function(){ 22 This.style.width=This.offsetWidth+8+"px"; 23 if(This.offsetWidth>=160) 24 clearInterval(This.time); 25 },30) 26 } 27 aA[i].onmouseout=function(){ 28 clearInterval(this.time); 29 var This=this; 30 this.time=setInterval(function(){ 31 This.style.width=This.offsetWidth-8+"px"; 32 if(This.offsetWidth<=120){ 33 This.style.width='120px'; 34 clearInterval(This.time); 35 } 36 },30) 37 } 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <ul> 44 <li><a class="on" href="#">首 页</a></li> 45 <li><a href="#">新闻快讯</a></li> 46 <li><a href="#">产品展示</a></li> 47 <li><a href="#">售后服务</a></li> 48 <li><a href="#">联系我们</a></li> 49 </ul> 50 </body> 51 </html>