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

ttx9n · 发表于 2007-8-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=https://www.jb51.net/article/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);"> 
      系统选项 
    </td> 
  </tr> 
  <tr> 
    <td> 
       
        <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=https://www.jb51.net/article/images/icon_safe.gif> 
              安全选项</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_recycle.gif> 
              垃圾邮件选项</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_dynamic.gif> 
              动态规则选项</a> 
            </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);"> 
      系统规则 
    </td> 
  </tr> 
  <tr> 
    <td> 
       
        <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=https://www.jb51.net/article/images/icon_ip.gif> 
              IP过滤规则</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailer.gif> 
              信封过滤规则</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailheader.gif> 
              信头过滤规则</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailbody.gif> 
              信体过滤规则</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_accessory.gif> 
              附件过滤规则</a> 
            </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> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_user.gif> 
              用户管理</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_course.gif> 
              进程管理</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_host.gif> 
              主机运行状态</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_data.gif> 
              数据备份</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_recycle.gif> 
              垃圾目录管理</a> 
            </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> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_ip.gif> 
              IP过滤统计</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailer.gif> 
              信封过滤统计</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailheader.gif> 
              信头过滤统计</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_mailbody.gif> 
              信体过滤统计</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_accessory.gif> 
              附件过滤统计</a> 
            </td> 
          </tr> 
          <tr> 
            <td height=20> 
              <a href=http://qybbs.net onfocus=this.blur();><img src=https://www.jb51.net/article/images/icon_dynamic.gif> 
              动态规则统计</a> 
            </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需刷新才能执行]

5cf304mn2 · 发表于 2022-8-31 21:51:59

笑纳了老板

hd1tvqb3 · 发表于 2022-10-12 16:26:13

我找了挺久终于找到了

JosephSA · 发表于 2023-8-18 08:19:25

dfdsafdsfdsfdsf

shw5ovr · 发表于 2023-8-26 02:09:52

1312315458748777

70r45_zs · 发表于 2023-9-14 07:22:37

很不错的样子

qwe520 · 发表于 2023-9-23 05:54:38

看看怎么样再说

.l4 · 发表于 2023-10-21 13:27:49

搞个免费的用用

0y3yp · 发表于 2024-1-27 05:45:12

不错的源码论坛

0y3yp · 发表于 2024-4-9 01:38:52

老大你好你好好你好

账号		自动登录	找回密码
密码			立即注册

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

相关帖子