QQ菜單（DIV+JS可展開、折疊）

2024-09-05 12:19:21

字體：大中小

供稿：網(wǎng)友

DIV+JS類QQ菜單，可展開折疊，小巧靈活，代碼修改方便，菜單采用LI列表，用CSS可以統(tǒng)一去控制，有興趣的可以再完善一下。

<html><head><title>QQ菜單</title><style>td { cursor: hand; font-family: Tahoma; background-color: #0066cc; color: #fff; font-size: 9pt; }li { color: #FF0000; font-family: Tahoma; background-color: skyblue; font-size: 9pt;}.up{ background-color: #3A6EA5; border: 1 solid #fff; }</style><script>function show(c_Str){if(document.all(c_Str).style.display=='none'){document.all(c_Str).style.display='block';}else{document.all(c_Str).style.display='none';}}function high(){if (event.srcElement.className=="k"){event.srcElement.style.background="336699"event.srcElement.style.color="white"}}function low(){if (event.srcElement.className=="k"){event.srcElement.style.background="99CCFF"event.srcElement.style.color=""}}</script></head><body topmargin="0" leftmargin="5"><div align="left">  <table border="0" width="98" cellspacing="0" cellpadding="0">    <tr>      <td><div   id="iwvjtn8m0"   class=up onclick=show("a0")>ASP代碼</div><div onmouseover=high() onmouseout=low()  id=a0 style="display:none"><li>菜單導(dǎo)航</li><li>層和布局</li><li>背景特效</li><li>圖片特效</li><li>瀏覽器相關(guān)</li><li>廣告代碼</li></div></td>    </tr>    <tr>      <td><div   id="iwvjtn8m0"   class=up onclick=show("a1")>PHP源碼</div><div onmouseover=high() onmouseout=low()  id=a1 style="display:none"><li>日期時間</li><li>文本特效</li><li>表格相關(guān)</li><li>表單及按鈕</li><li>計(jì)算轉(zhuǎn)換</li><li>游戲娛樂</li></div></td>    </tr>  </table></div></body></html>

上一篇：JS折疊菜單

下一篇：CSS導(dǎo)航菜單