• 漂亮的仿flash菜单,来自蓝色经典


    <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>
    /*
    http://lexrus.blueidea.com/

    这是把事件动作绑定到菜单上的函数
    */
    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><a href="http://www.lenvo.cn/%22%3Ewww.lenvo.cn%3C/a%3E%3C/td>
      <td>Name</td>
      <td>Is</td>
      <td>LeX</td>
      <td>Rus</td>
      <td>!!!</td>
     </tr>
    </table>

    <script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
    <br><br><br><br>
    <!--下面这个是竖排的-->
    <table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
     <tr><td>My</td></tr>
     <tr><td>Name</td></tr>
     <tr><td>Is</td></tr>
     <tr><td>LeX</td></tr>
     <tr><td>Rus</td></tr>
     <tr><td>!!!</td></tr>
    </table>
    <script>attachXMenu(xmenu1);</script>

  • 相关阅读:
    2012-2013年度大总结
    [每日一题] 11gOCP 1z0-052 :2013-08-31 数据库的存储结构....................................................A8
    Oracle约束操作
    几道字典树题目
    1032
    uva 10718 Bit Mask(贪心)
    找工作笔试面试那些事儿(2)---内存管理那些事
    汉语-词语:结构
    汉语-词语:形式
    汉语-词语:方向
  • 原文地址:https://www.cnblogs.com/itecho/p/1307123.html
Copyright © 2020-2023  润新知