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

更新时间：2007年08月28日 20:49:33 作者：

<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>       <div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1>         <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_safe.gif>               安全选项</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_recycle.gif>               垃圾邮件选项</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_dynamic.gif>               动态规则选项</a>             </td>           </tr>         </table>       </div>     </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>       <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2>         <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_ip.gif>               IP过滤规则</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailer.gif>               信封过滤规则</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailheader.gif>               信头过滤规则</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailbody.gif>               信体过滤规则</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_accessory.gif>               附件过滤规则</a>             </td>           </tr>         </table>       </div>     </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>       <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3>         <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_user.gif>               用户管理</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_course.gif>               进程管理</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_host.gif>               主机运行状态</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_data.gif>               数据备份</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_recycle.gif>               垃圾目录管理</a>             </td>           </tr>         </table>       </div>     </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>       <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4>         <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_ip.gif>               IP过滤统计</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailer.gif>               信封过滤统计</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailheader.gif>               信头过滤统计</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailbody.gif>               信体过滤统计</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_accessory.gif>               附件过滤统计</a>             </td>           </tr>           <tr>             <td height=20>               <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_dynamic.gif>               动态规则统计</a>             </td>           </tr>         </table>       </div>     </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需再刷新一下页面才能执行]

您可能感兴趣的文章:

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

TypeScript 类型断言的几种实现
本文主要介绍了TypeScript 类型断言的实现，有使用关键字as和标签<>两种方式，具有一定的参考价值，感兴趣的可以了解一下
2024-01-01
微信小程序学习之数据处理详解
这篇文章主要给大家介绍了关于微信小程序中数据处理的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
css静态滤镜 + A:Hover 效果
css静态滤镜 + A:Hover 效果...
2007-05-05
分享Bootstrap简单表格、表单、登录页面
本文给大家分享Bootstrap简单表格、表单、登录页面的实例代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-08-08
在js文件中写el表达式取不到值的原因及解决方法
在js文件中写el表达式取不到值，百度一下，将经验总结如下，有类似情况的朋友可以参考下
2013-12-12
es6的数字处理的方法（5个）
本文主要介绍了es6的数字处理的方法。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript中的isXX系列是否继续使用的分析
我们很容易被漂亮的代码吸引，也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不，我就收集了一系列形如 “是否为……？” 的判断的boolean函数。
2011-04-04
来自腾讯的一个不固定高度得消息的滚动特效
8月最后1天，赶紧补篇博客。贴个最近看到的腾讯的特效，写的还可以。先看效果。
2010-09-09
javascript数字格式化通用类 accounting.js使用
accounting.js 是一个非常小的JavaScript方法库用于对数字，金额和货币进行格式化。并提供可选的Excel风格列渲染。它没有依赖任何JS框架。货币符号等可以按需求进行定制
2012-08-08
javascript绘制漂亮的心型线效果完整实例
这篇文章主要介绍了javascript绘制漂亮的心型线效果实现方法,结合完整实例形式分析了JavaScript图形绘制的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具