校园天空

标题: 漂亮的仿flash菜单 [打印本页]
作者: 萧遥    时间: 2008-12-4 15:36
标题: 漂亮的仿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>
复制代码




欢迎光临 校园天空 (https://bbs.xytk.com/) Powered by Discuz! X3.5