带渐变效果的变色导航菜单

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滑动门代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注