仿QQ的菜單，三級豎向

2024-09-05 12:20:27

字體：大中小

來源：轉載

供稿：網友

仿QQ的三級菜單，豎向三級，兩級的比較多見，三級的不多哦，不過本菜單三級菜單沒有美化，你需要自己再美化一下。

<html><head><title>仿QQ的菜單，三級豎向</title><script language="javascript">function Switchmenu(obj){if(document.getElementById){var el = document.getElementById("menu_"+obj);var ar = document.getElementById("menu").getElementsByTagName("ul"); if(el.style.display != "block"){ for (var i=0; i<script language="javascript" id="clientEventHandlersJS">      </script>	<style type="text/css">	</style></head><body>	<div   class="70qarhlowxag"   id="menu">		<div   class="70qarhlowxag"   id="menu1" class="menutbg_1 cursor" onclick="Switchmenu('1')">一級菜單A</div>		<ul id="menu_1" class="submenu"><table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">                <tr>                  <td  class="mt1"> 文管產品 </td>                </tr>                <tr id="LM1" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList">                       <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>                    </div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM2" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList">                  <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div></div></td>                </tr>              </table>		</ul>		<div   class="70qarhlowxag"   id="menu2" class="menutbg_1 cursor" onclick="Switchmenu('2')">一級菜單B</div>		<ul id="menu_2" class="submenu">		<table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">                <tr>                  <td  class="mt1"> 文管產品 </td>                </tr>                <tr id="LM3" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList"><div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div></div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM4" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList"><div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div></div></td>                </tr>              </table>		</ul>		<div   class="70qarhlowxag"   id="menu3" class="menutbg_1 cursor" onclick="Switchmenu('3')">一級菜單C</div>		<ul id="menu_3" class="submenu">						  <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">                <tr>                  <td  class="mt1"> 文管產品 </td>                </tr>                <tr id="LM5" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList"><div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div>					   <div   id="70qarhlowxag"   class="mt3">123213</div></div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM6" style="DISPLAY: none">                  <td><div   id="70qarhlowxag"   class="TxtList"><div   id="70qarhlowxag"   class="mt3">123213</div>					 <div   id="70qarhlowxag"   class="mt3">123213</div>					 <div   id="70qarhlowxag"   class="mt3">123213</div></div></td>                </tr>              </table>		</ul>	</div></body></html>

上一篇：纖細線條型CSS滑動門

下一篇：JS+CSS但分類動態選擇及移動功能