渐变,类Flash的菜单

渐变,类Flash的菜单!酷!

 1<style>
 2/**//* 先把这个 xmenu 的样式放到css里 */
 3.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;}
 4</style>
 5
 6<script>
 7/**//* 
 8http://lexrus.blueidea.com
 9
10这是把事件动作绑定到菜单上的函数
11*/
12function attachXMenu(objid){
13    var tds=objid.getElementsByTagName('td');
14    for(var i=0;i<tds.length;i++){
15        with(tds[i]){
16            onmouseover=function(){
17                with(this){
18                    filters[0].apply();
19                    style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
20                    style.border='1px solid #ffffff'; //边框
21                    style.color='black'; //文字颜色
22                    filters[0].play();
23                }
24            }
25            onmouseout=function(){
26                with(this){
27                    filters[0].apply();
28                    style.background='#336699'; //这是鼠标离开时的背景颜色
29                    style.border='1px solid #336699'; //边框
30                    style.color='#ffffff'; //文字颜色
31                    filters[0].play();
32                }
33            }
34        }
35    }
36}
37</script>
38
39<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
40<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
41    <tr>
42        <td>Home</td>
43        <td>Web Standards</td>
44        <td>SEO</td>
45        <td>ASP.NET</td>
46        <td>C#</td>
47        <td>Feed Back</td>
48    </tr>
49</table>
50
51<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id
52</script>
53
54<!--下面这个是竖排的-->
55
56<br/>
57<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
58    <tr><td>Home</td></tr>
59    <tr><td>Blog</td></tr>
60    <tr><td>GuestBook</td></tr>
61    <tr><td>Blueidea</td></tr>
62    <tr><td>ChinaUI</td></tr>
63    <tr><td>Microsoft</td></tr>
64</table>
65<script>attachXMenu(xmenu1);</script>