网页特效 - 不错的菜单效果
{ Posted on 星期四, 七月 16, 2009
by Kaiser.XKw
}
Tags :
Web Design
看到一个不错的菜单效果，简单，以后可以用在程式上：
<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>
<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4"
border="0" bgcolor="#336699"
align="center">
<tr>
<td>Menu1</td>
<td>Menu2</td>
<td>Menu3</td>
<td>Menu4</td>
<td>Menu5</td>
<td>Menu6</td>
</tr>
</table>
<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的
id</script>
<!--下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4"
border="0" bgcolor="#336699"
align="center">
<tr><td>Menu1</td></tr>
<tr><td>Menu2</td></tr>
<tr><td>Menu3</td></tr>
<tr><td>Menu4</td></tr>
<tr><td>Menu5</td></tr>
<tr><td>Menu6</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>
學會當個愛情的建築師, 學會為所愛的人努力.
No Response to "网页特效 - 不错的菜单效果"
发表评论