当前位置：Gxlcms > JavaScript > 一个简单的收缩菜单效果

一个简单的收缩菜单效果

时间：2021-07-01 10:21:17 帮助过：54人阅读

<table width="174"> 
  <tr> 
    <td bgcolor="#99CCFF">网页设计</td> 
  </tr> 
  <tr id='lay0' style="display:none;"> 
    <td><table width="100%" border="0" cellspacing="0"> 
      <tr> 
        <td width="12%"> </td> 
        <td width="88%">基础知识</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>HTML和CSS</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>Dreamweaver</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>FrontPage</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>Xhtml</td> 
      </tr> 
    </table></td> 
  </tr> 
  <tr> 
    <td bgcolor="#99CCFF">FLASH</td> 
  </tr> 
  <tr id='lay1' style="display:none;"> 
    <td><table width="100%" border="0" cellspacing="0"> 
      <tr> 
        <td width="11%"> </td> 
        <td width="89%">基础知识</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>初级操作</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>实例教学</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>Action应用</td> 
      </tr> 
    </table></td> 
  </tr> 
  <tr> 
    <td bgcolor="#99CCFF">平面设计</td> 
  </tr> 
  <tr id='lay2' style="display:none;"> 
    <td><table width="100%" border="0" cellspacing="0"> 
      <tr> 
        <td width="13%"> </td> 
        <td width="87%">基础知识</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>Photoshop</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>Fireworks</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>滤镜专辑</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>CorelDraw</td> 
      </tr> 
    </table></td> 
  </tr> 
  <tr> 
    <td bgcolor="#99CCFF">编程开发</td> 
  </tr> 
  <tr id='lay3' style="display:none;"> 
    <td><table width="100%" border="0" cellspacing="0"> 
      <tr> 
        <td width="13%"> </td> 
        <td>Asp</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>ASP.NET</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>JSP</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>PHP</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>数据库</td> 
      </tr> 
    </table></td> 
  </tr> 
  <tr> 
    <td bgcolor="#99CCFF">网页特效</td> 
  </tr> 
  <tr id='lay4' style="display:none;"> 
    <td><table width="100%" border="0" cellspacing="0"> 
      <tr> 
        <td width="13%"> </td> 
        <td>窗体特效</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>菜单特效</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>文本特效</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>鼠标特效</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>图像媒体</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>时间日期</td> 
      </tr> 
      <tr> 
        <td> </td> 
        <td>其它综合</td> 
      </tr> 
    </table></td> 
  </tr> 
</table> 
<script language=JavaScript> 
function showmenu(strID){ 
    var i; 
    for(i=0;i<=4;i++){ 
        var lay; 
        lay = eval('lay' + i); 
        if (lay.style.display=="block" && lay!=eval(strID)){ 
            lay.style.display = "none"; 
        } 
    } 
    if (strID.style.display=="none"){ 
        strID.style.display = "block"; 
    }else{ 
        strID.style.display = "none"; 
    } 
} 
</script>

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

一个简单的收缩菜单效果

人气教程排行