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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="keywords" content=""> <style 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> <script language=javascript> function menuShow（obj,maxh,obj2） { if（obj.style.pixelHeight<maxh） { obj.style.pixelHeight+=maxh/20; obj.filters.alpha.opacity+=5; obj2.background="images/title_bg_hide.gif"; if（obj.style.pixelHeight==maxh/10） obj.style.display="block"; myObj=obj; myMaxh=maxh; myObj2=obj2; setTimeout（"menuShow（myObj,myMaxh,myObj2）","5"）; } } function menuHide（obj,maxh,obj2） { if（obj.style.pixelHeight>0） { if（obj.style.pixelHeight==maxh/20） obj.style.display="none"; obj.style.pixelHeight-=maxh/20; obj.filters.alpha.opacity-=5; obj2.background="images//title_bg_show.gif"; myObj=obj; myMaxh=maxh myObj2=obj2; setTimeout（"menuHide（myObj,myMaxh,myObj2）","5"）; } else if（whichContinue） whichContinue.click（）; } function menuChange（obj,maxh,obj2） { if（obj.style.pixelHeight） { menuHide（obj,maxh,obj2）; whichOpen=""; whichcontinue=""; } else if（whichOpen） { whichContinue=obj2; whichOpen.click（）; } else { menuShow（obj,maxh,obj2）; whichOpen=obj2; whichContinue=""; } } </script> <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> <img src=images/title.gif width=158 height=38> </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）;"> <span>系统选项</span> </td> </tr> <tr> <td><table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <img src=images/icon_safe.gif> 安全选项 </td> </tr> <tr> <td height=20> <img src=images/icon_recycle.gif> 垃圾邮件选项 </td> </tr> <tr> <td height=20> <img src=images/icon_dynamic.gif> 动态规则选项 </td> </tr> </table></td> </tr> </table> <script language=javascript> var whichOpen=menuTitle1; var whichContinue=""; </script> <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）;"> <span>系统规则</span> </td> </tr> <tr> <td><table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <img src=images/icon_ip.gif> IP过滤规则 </td> </tr> <tr> <td height=20> <img src=images/icon_mailer.gif> 信封过滤规则 </td> </tr> <tr> <td height=20> <img src=images/icon_mailheader.gif> 信头过滤规则 </td> </tr> <tr> <td height=20> <img src=images/icon_mailbody.gif> 信体过滤规则 </td> </tr> <tr> <td height=20> <img src=images/icon_accessory.gif> 附件过滤规则 </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）;"> <span>系统管理</span> </td> </tr> <tr> <td><table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <img src=images/icon_user.gif> 用户管理 </td> </tr> <tr> <td height=20> <img src=images/icon_course.gif> 进程管理 </td> </tr> <tr> <td height=20> <img src=images/icon_host.gif> 主机运行状态 </td> </tr> <tr> <td height=20> <img src=images/icon_data.gif> 数据备份 </td> </tr> <tr> <td height=20> <img src=images/icon_recycle.gif> 垃圾目录管理 </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）;"> <span>系统统计</span> </td> </tr> <tr> <td><table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <img src=images/icon_ip.gif> IP过滤统计 </td> </tr> <tr> <td height=20> <img src=images/icon_mailer.gif> 信封过滤统计 </td> </tr> <tr> <td height=20> <img src=images/icon_mailheader.gif> 信头过滤统计 </td> </tr> <tr> <td height=20> <img src=images/icon_mailbody.gif> 信体过滤统计 </td> </tr> <tr> <td height=20> <img src=images/icon_accessory.gif> 附件过滤统计 </td> </tr> <tr> <td height=20> <img src=images/icon_dynamic.gif> 动态规则统计 </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> <span>退出系统</span> </td> </tr> </table> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]