制作完美的炫彩变色菜单_冰河星矢

http://blog.sina.com.cn/u/1223244273

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

制作完美的炫彩变色菜单

(2007-04-17 18:46:12)

分类：情感生活类一览众群山小

代码如下：

<html><head><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_r('td');
for(var i=0;i<tds.length;i++){
  with(tds[i]){
   onmouseover=function(){
    with(this){
     filters[0].apply();
     style.background='#FEBD20'; //这是鼠标移上去时的背景颜色
     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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>冰河炫彩变色菜单</title>
</head>

<table class="xmenu" id="binghe" width="500" cellpadding="1" cellspacing="4"
border="0" bgcolor="#00000" align="center"><tr>
<td><A href="http://bh.xoyoz.com/luntan" target=_blank>炫博论坛</A></td>
<td><A href="http://bh.xoyoz.com/bbs" target=_blank>逍遥贴吧</A></td>
<td><A href="http://bh.xoyoz.com/blog" target=_blank>技术博客</A></td>
<td><A href="http://bh.xoyoz.com/talk" target=_blank>在线聊天</A></td>
<td><A href="http://blog.sina.com.cn/binghe2008" target=_blank>玩转博客</A></td>
<td><A href="http://bh.xoyoz.com/book" target=_blank>留言日记</A></td>
</tr>
</table>
<script>attachXMenu(binghe);</script></body></html>

1）字体、背景颜色、表格边框等具体说明参考上述代码中的说明修改即可。只需将红色代码替换成自己的链接。

2）把上述代码复制到记事本，另存为"xxx.html"的文件名（网页的形式）。将其上传到网络空间得到你要调用的网址。

例如：http://bh.xoyoz.com/web/menu00.html

新浪博客调用的代码如下：

参数说明：

LEFT: 0px; POSITION: absolute; TOP: 0px 根据定位的位置设置0px；

注意：要想设置更多的连接，需要将代码的＂500＂与"520"重新设置

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：你的眼睛背叛了你的心

后一篇：隐藏式导航菜单制作

新浪BLOG意见反馈留言板　欢迎批评指正