js各种脚本

<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>My</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/>
<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> 

<style type="text/css">
<!--
*{}{margin:0;padding:0;border:0;}
body {}{
 font-family: arial, 宋体, serif;
 font-size:12px;
}
#nav {}{
 width:180px;
    line-height: 24px; 
 list-style-type: none;
 text-align:left;
    /**//*定义整个ul菜单的行高和背景色*/
}
/**//*==================一级目录===================*/
#nav a {}{
 width: 160px; 
 display: block;
 padding-left:20px;
 /**//*Width(一定要)，否则下面的Li会变形*/
}
#nav li {}{
 background:#CCC; /**//*一级目录的背景色*/
 border-bottom:#FFF 1px solid; /**//*下面的一条白边*/
 float:left;
 /**//*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{}{
 background:#CC0000; /**//*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {}{
 color:#666; text-decoration:none;
}
#nav a:visited  {}{
 color:#666;text-decoration:none;
}
#nav a:hover  {}{
 color:#FFF;text-decoration:none;font-weight:bold;
}
/**//*==================二级目录===================*/
#nav li ul {}{
 list-style:none;
 text-align:left;
}
#nav li ul li{}{ 
 background: #EBEBEB; /**//*二级目录的背景色*/
}
#nav li ul a