最簡潔的仿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