仿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 id="menu">		<div 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 class="TxtList">                       <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div>                    </div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM2" style="DISPLAY: none">                  <td><div class="TxtList">                  <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div></div></td>                </tr>              </table>		</ul>		<div 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 class="TxtList"><div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div></div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM4" style="DISPLAY: none">                  <td><div class="TxtList"><div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div></div></td>                </tr>              </table>		</ul>		<div 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 class="TxtList"><div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div>					   <div class="mt3">123213</div></div></td>                </tr>                <tr>                  <td class="mt1"> 桌面文具 </td>                </tr>                <tr id="LM6" style="DISPLAY: none">                  <td><div class="TxtList"><div class="mt3">123213</div>					 <div class="mt3">123213</div>					 <div class="mt3">123213</div></div></td>                </tr>              </table>		</ul>	</div></body></html>

上一篇：纤细线条型CSS滑动门

下一篇：JS+CSS但分类动态选择及移动功能