帶漸變效果的變色導航菜單

2024-09-05 12:19:15

字體：大中小

來源：轉載

供稿：網友

很漂亮的導航菜單，響應鼠標運作，鼠標移過時帶有漸變效果，一定會使你的網頁更靚。

<html><head><title>帶漸變效果的變色菜單</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><style>/* 先把這個 xmenu 的樣式放到css里 */.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}</style><script>function attachXMenu(objid){	var tds=objid.getElementsByTagName('td');	for(var i=0;i<tds.length;i++){		with(tds[i]){			onmouseover=function(){				with(this){					filters[0].apply();					style.background='#66CCFF'; //鼠標移上去的背景色					style.border='1px solid #ffffff'; //邊框					style.color='black'; //文字顏色					filters[0].play();				}			}			onmouseout=function(){				with(this){					filters[0].apply();					style.background='#336699'; //鼠標離開時背景色					style.border='1px solid #336699'; //邊框					style.color='#ffffff'; //文字顏色					filters[0].play();				}			}		}	}}</script><table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">	<tr>		<td>HOME</td>		<td>ASP</td>		<td>PHP</td>		<td>VB.NET</td>		<td>JAVA</td>		<td>DELPHI</td>	</tr></table><script>attachXMenu(xmenu0); //在上面table結束地方執行動作綁定, xmenu0就是那個table的id</script><br/><table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">	<tr><td>MyHome</td></tr>	<tr><td>Name</td></tr>	<tr><td>IsNEW</td></tr></table><script>attachXMenu(xmenu1);</script> </body></html>

上一篇：動感的炫彩導航菜單代碼

下一篇：一款經典簡潔的CSS滑動門代碼