切换菜单项的时候,菜单项背景色具有淡入淡出的效果。
截图不能反映淡入淡出效果,建议运行代码试一下。
- <? xml version = "1.0" encoding = "utf-8" ?>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- < html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "zh" lang = "zh" dir = "ltr" >
- < head profile = "http://www.w3.org/2000/08/w3c-synd/#" >
- < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" />
- < meta name = "keywords" content = "Leo,HEnTStudio,LAMP,PHP,MySQL" />
- < meta name = "DEscription" content = "HEnTStudio" />
- < meta name = "Author" content = "Leo,HEnTStudio" />
- < title > NewPage|xHTML1.0Transitional </ title >
- < link rel = "shortcuticon" href = "favicon.ico" />
- < link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
- < script type = "text/javascript" src = "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" > </ script >
- < script type = "text/javascript" src = "http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js" > </ script >
- < script type = "text/javascript" >
- var Event = YAHOO .util.Event;
- var Dom = YAHOO .util.Dom;
- Event.onDOMReady(function(){
- var lis = Dom .get('nav').getElementsByTagName('li');
- var selected = null ;
- for(var i = 0 ;i < lis.length ;i++){
- Event.addListener(lis[i],'mouseover',
- function(){
- if(selected!=this){
- var anim = new YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#d49346'}},0.5);
- anim.animate();
- }
- });
- Event.addListener(lis[i],'mouseout',
- function(){
- if(selected!=this){
- var anim = new YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#89a4b1'}},0.5);
- anim.animate();
- }
- });
- Event.addListener(lis[i],'click',
- function(){
- if(selected&&selected!=this){
- var anim0 = new YAHOO.util.ColorAnim(selected,{backgroundColor:{to:'#89a4b1'}},0.5);
- anim0.animate();
- }
- selected = this ;
- this.style.backgroundColor = '#ff9900' ;
- });
- }
- });
- </ script >
- < style type = "text/css" >
- .nav{
- list-style-type:none;
- width:100%;
- font-size:2em;
- color:#fff;
- background:#89a4b1;
- margin:0;
- padding:0;
- height:50px;
- line-height:50px;
- }
- .navli{
- float:left;
- padding:0;
- width:15%;
- display:inline;
- text-align:center;
- border-right:1pxsolid#fff;
- cursor:pointer;
- }
- .nav.home{
- float:left;
- margin-left:1%;
- border-left:1pxsolid#fff;
- }
- </ style >
- </ head >
- < body >
- < ul class = "nav" id = "nav" >
- < li class = "home" > Home </ li >
- < li class = "about" > About </ li >
- < li > Services </ li >
- < li > Contact </ li >
- </ ul >
- </ body >
- </ html >