非常酷的js图形渐隐导航菜单栏

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="keywords" content=""> <sty1e type=text/css> body  { background:#799AE1; margin:0px; font:normal 12px 宋体; } table  { border:0px; } td  { font:normal 12px 宋体; } img  { vertical-align:bottom; border:0px; } a  { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover  { color:#428EFF } .sec_menu  { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; } .menu_title  { } .menu_title span  { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; } .menu_title2  { } .menu_title2 span  { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; } </style>  <base target=main> </head> <body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;"> <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=42 valign=bottom>     </td>   </tr> </table>   <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_hide.gif id=menuTitle1 onclick="menuChange(menu1,80,menuTitle1);">系统选项     </td>   </tr>   <tr>     <td>  <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">    <tr>      <td height=20>  安全选项      </td>    </tr>    <tr>      <td height=20>  垃圾邮件选项      </td>    </tr>    <tr>      <td height=20>  动态规则选项      </td>    </tr>  </table>     </td>   </tr> </table>    <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle2 onclick="menuChange(menu2,120,menuTitle2);">系统规则     </td>   </tr>   <tr>     <td>  <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">    <tr>      <td height=20>  IP过滤规则      </td>    </tr>    <tr>      <td height=20>  信封过滤规则      </td>    </tr>    <tr>      <td height=20>  信头过滤规则      </td>    </tr>    <tr>      <td height=20>  信体过滤规则      </td>    </tr>    <tr>      <td height=20>  附件过滤规则      </td>    </tr>  </table>     </td>   </tr> </table>   <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle3 onclick="menuChange(menu3,120,menuTitle3);">系统管理     </td>   </tr>   <tr>     <td>  <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">    <tr>      <td height=20>  用户管理      </td>    </tr>    <tr>      <td height=20>  进程管理      </td>    </tr>    <tr>      <td height=20>  主机运行状态      </td>    </tr>    <tr>      <td height=20>  数据备份      </td>    </tr>    <tr>      <td height=20>  垃圾目录管理      </td>    </tr>  </table>     </td>   </tr> </table>   <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4);">系统统计     </td>   </tr>   <tr>     <td>  <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">    <tr>      <td height=20>  IP过滤统计      </td>    </tr>    <tr>      <td height=20>  信封过滤统计      </td>    </tr>    <tr>      <td height=20>  信头过滤统计      </td>    </tr>    <tr>      <td height=20>  信体过滤统计      </td>    </tr>    <tr>      <td height=20>  附件过滤统计      </td>    </tr>    <tr>      <td height=20>  动态规则统计      </td>    </tr>  </table>     </td>   </tr> </table>   <table cellpadding=0 cellspacing=0 width=158 align=center>   <tr style="cursor:hand;">     <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_quit.gif>退出系统     </td>   </tr> </table> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

非常酷的js图形渐隐导航菜单栏

JavaScript相关栏目本月热门文章