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>
