JS+CSS另类折叠菜单

2024-09-05 12:19:27

字体：大中小

来源：转载

供稿：网友

另类的折叠/展开菜单，基于CSS+JS实现，相信你以前肯定见到过，还不错吧？本人比较喜欢的一种特效。本代码不但实现了这种功能，而且代码扩展性很好，你可以无限制添加折叠/展开单元，不受任何限制。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>另类的折叠菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><script language="javascript">function menu(x,y){for(var i=0;i<x.length;i++){if(x[i].style.display==''){x[i].style.display='none';y.src='/jscss/demoimg/200903/d_jia.gif';}else{x[i].style.display='';y.src='/jscss/demoimg/200903/d_jian.gif';}}}</script></head><body><table>  <tr>    <td vAlign="top" width="15"></td>    <td width="106">      <table width="739" border="0" align="center" cellPadding="0" cellSpacing="0">        <tr>          <td  height="31" colspan="2"><img src="http://www.aspku.com/jscss/demoimg/200903/d_jia.gif" width="12" height="12" class="title" name="icon1" id="icon1" onclick="menu(menu1,icon1)" style="cursor:pointer">ASP源代码</td>        </tr>        <tr id="menu1" style="display:none">          <td width="20" height="30" align="center"> </td>          <td class="main_left">ASP源代码，高速下载。</td>        </tr>            <tr id="menu1" style="display:none">          <td height="1" align="center"></td>          <td height="1"></td>        </tr>      </table>    </td>  </tr>  <tr>    <td vAlign="top" width="15"></td>    <td width="106">      <table width="739" border="0" align="center" cellPadding="0" cellSpacing="0">        <tr>          <td  height="31" colspan="2"><img src="http://www.aspku.com/jscss/demoimg/200903/d_jia.gif" width="12" height="12" class="title" name="icon2" id="icon2" onclick="menu(menu2,icon2)" style="cursor:pointer">PHP源代码</td>        </tr>        <tr id="menu2" style="display:none">          <td width="20" height="30" align="center"> </td>          <td class="main_left">PHP源代码</td>        </tr>            <tr id="menu2" style="display:none">          <td height="1" align="center"></td>          <td height="1"></td>        </tr>      </table>    </td>  </tr></table></body></html>

上一篇：带动画下拉展开的CSS滑动门

下一篇：颜色渐变的动感导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注