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

复制代码