最简洁的仿QQ折叠菜单的实现

2024-09-05 12:19:51

字体：大中小

来源：转载

供稿：网友

最简洁的仿QQ折叠菜单的实现，学习编写折叠菜单的好示例，自己把CSS美化一下，还是不错的效果。

<!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>最简洁的仿QQ折叠菜单的实现</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.hide{display:none;}.show{display:block;}.pointer{cursor:pointer;}</style></head><body><table id="menu" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000">  <tr class="pointer" onclick="Menu(this);">     <td height="28" align="center">      <table width="150" border="0" cellpadding="0" cellspacing="0">        <tr align="center">          <td>网站相关</td>               </tr>      </table>    </td>  </tr>  <tr class="show">     <td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td align="center">最新更新</td></tr><tr> <td align="center">浏览排行</td></tr>      </table>    </td>  </tr>  <tr class="pointer" onclick="Menu(this);">     <td align="center">      <table width="100%" border="0" cellpadding="0" cellspacing="0">        <tr align="center">          <td>ASP源码</td>        </tr>      </table>    </td>  </tr>  <tr class="hide">     <td align="center" valign="top">      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">        <tr> <td align="center">新闻文章</td></tr><tr><td align="center">论坛社区</td></tr>      </table>    </td>  </tr>  <tr class="pointer" onclick="Menu(this);">     <td align="center" >      <table width="100%" border="0" cellpadding="0" cellspacing="0">        <tr align="center">          <td>PHP源码</td>        </tr>      </table>    </td>  </tr>  <tr class="hide">     <td align="center" valign="top">       <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">        <tr>           <td align="center">Ajax相关</td></tr><tr><td align="center">聊天留言</td></tr>      </table>    </td>  </tr>  <tr class="pointer" onclick="Menu(this);">     <td align="center">      <table width="100%" border="0" cellpadding="0" cellspacing="0">        <tr align="center">          <td>演示菜单</td>        </tr>      </table>    </td>  </tr>  <tr class="hide">     <td align="center" valign="top">      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">        <tr>           <td align="center">内容一</td>        </tr>		<tr>           <td align="center">内容二</td>        </tr>      </table>    </td>  </tr></table> <script language="javascript"> function Menu(obj){		var tb=document.getElementById("menu");	for(i=0;i<8;i++)	{		if(i % 2 ==1)		{			tb.rows[i].className="hide";		}	}	if(obj.className="pointer" )	{ 		if(tb.rows(obj.rowIndex+1).className=="show")		{			tb.rows(obj.rowIndex+1).className="hide";		}		else		{			tb.rows(obj.rowIndex+1).className="show";		}	}}</script></body></html>

上一篇：金属感不错的仿Vista导航栏

下一篇：比较流行的JS+CSS选项卡TAB