用YUI Animation 和css实现超酷导航菜单

切换菜单项的时候，菜单项背景色具有淡入淡出的效果。
截图不能反映淡入淡出效果，建议运行代码试一下。

1. <? xml version = "1.0" encoding = "utf-8" ?>
2. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. < html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "zh" lang = "zh" dir = "ltr" >
4. < head profile = "http://www.w3.org/2000/08/w3c-synd/#" >
5. < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" />
6. < meta name = "keywords" content = "Leo,HEnTStudio,LAMP,PHP,MySQL" />
7. < meta name = "DEscription" content = "HEnTStudio" />
8. < meta name = "Author" content = "Leo,HEnTStudio" />
9. < title > NewPage|xHTML1.0Transitional </ title >
10. < link rel = "shortcuticon" href = "favicon.ico" />
11. < link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
12. < script type = "text/javascript" src = "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" > </ script >
13. < script type = "text/javascript" src = "http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js" > </ script >
14. < script type = "text/javascript" >
15. var Event = YAHOO .util.Event;
16. var Dom = YAHOO .util.Dom;
17. Event.onDOMReady(function(){
18. var lis = Dom .get('nav').getElementsByTagName('li');
19. var selected = null ;
20. for(var i = 0 ;i < lis.length ;i++){
21. Event.addListener(lis[i],'mouseover',
22. function(){
23. if(selected!=this){
24. var anim = new YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#d49346'}},0.5);
25. anim.animate();
26. }
27. });
28. Event.addListener(lis[i],'mouseout',
29. function(){
30. if(selected!=this){
31. var anim = new YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#89a4b1'}},0.5);
32. anim.animate();
33. }
34. });
35. Event.addListener(lis[i],'click',
36. function(){
37. if(selected&&selected!=this){
38. var anim0 = new YAHOO.util.ColorAnim(selected,{backgroundColor:{to:'#89a4b1'}},0.5);
39. anim0.animate();
40. }
41. selected = this ;
42. this.style.backgroundColor = '#ff9900' ;
43. });
44. }
47. });
48. </ script >
49. < style type = "text/css" >
50. .nav{
51. list-style-type:none;
52. width:100%;
53. font-size:2em;
54. color:#fff;
55. background:#89a4b1;
56. margin:0;
57. padding:0;
58. height:50px;
59. line-height:50px;
60. }
61. .navli{
62. float:left;
63. padding:0;
64. width:15%;
65. display:inline;
66. text-align:center;
67. border-right:1pxsolid#fff;
68. cursor:pointer;
69. }
70. .nav.home{
71. float:left;
72. margin-left:1%;
73. border-left:1pxsolid#fff;
74. }
75. </ style >
76. </ head >
77. < body >
78. < ul class = "nav" id = "nav" >
79. < li class = "home" > Home </ li >
80. < li class = "about" > About </ li >
81. < li > Services </ li >
82. < li > Contact </ li >
83. </ ul >
85. </ body >
86. </ html >