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

Vanora ·

更新时间:2024-11-13

· 714 次阅读

<b> 
<b> 
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; } 
</b> 
<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" id="menuTitle1"> 
      系统选项 
    </td> 
  </tr> 
  <tr> 
    <td> 
        <table cellpadding="0" cellspacing="0" align="center" width="135"> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_safe.gif"> 
              安全选项 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_recycle.gif"> 
              垃圾邮件选项 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/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" id="menuTitle2"> 
      系统规则 
    </td> 
  </tr> 
  <tr> 
    <td> 
        <table cellpadding="0" cellspacing="0" align="center" width="135"> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_ip.gif"> 
              IP过滤规则 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailer.gif"> 
              信封过滤规则 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailheader.gif"> 
              信头过滤规则 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailbody.gif"> 
              信体过滤规则 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/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" id="menuTitle3"> 
      系统管理 
    </td> 
  </tr> 
  <tr> 
    <td> 
        <table cellpadding="0" cellspacing="0" align="center" width="135"> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_user.gif"> 
              用户管理 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_course.gif"> 
              进程管理 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_host.gif"> 
              主机运行状态 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_data.gif"> 
              数据备份 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/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" id="menuTitle4"> 
      系统统计 
    </td> 
  </tr> 
  <tr> 
    <td> 
        <table cellpadding="0" cellspacing="0" align="center" width="135"> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_ip.gif"> 
              IP过滤统计 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailer.gif"> 
              信封过滤统计 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailheader.gif"> 
              信头过滤统计 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_mailbody.gif"> 
              信体过滤统计 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/images/icon_accessory.gif"> 
              附件过滤统计 
            </td> 
          </tr> 
          <tr> 
            <td height="20"> 
              <img src="https://www.jb51.net/article/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"> 
      退出系统 
    </td> 
  </tr> 
</table> 
</b>

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

导航菜单菜单菜单栏 js

1024 个赞