一级横向滑动，二级竖向下拉综合菜单

2024-09-05 12:20:33

字体：大中小

来源：转载

供稿：网友

一级横向滑动，二级竖向下拉综合菜单，这个菜单一共是三级，前两级是滑动切换的方式，第三级主要是下拉菜单的形式，虽然简单的样式简约，但是实现他们其实是很复杂的，希望从事前端开发的朋友一同参考一下吧。

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一级横向滑动，二级竖向下拉综合菜单</title><style type="text/css"> </style><script language="javascript"></script></head><body><div id="menu">	<dl>		<dd class="ok" onmouseover="javascript:ShowMenu(this,0);"><span>菜单A</span></dd>		<dd onmouseover="javascript:ShowMenu(this,1);"><span>菜单B</span></dd>		<dd onmouseover="javascript:ShowMenu(this,2);"><span>菜单C</span></dd>	</dl>		<ol>		<li onmouseover="javascript:ShowSpan(this,0);">菜单A_0			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_0_0</h1>				<ul>					菜单A_0_0_0					菜单A_0_0_1				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单A_0_1</h1>				<ul class="no">					菜单A_0_1_0					菜单A_0_1_1					菜单A_0_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,1);">菜单A_1			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_1_0</h1>				<ul>					菜单A_1_0_0					菜单A_1_0_1				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单A_1_1</h1>				<ul class="no">					菜单A_1_1_0					菜单A_1_1_1					菜单A_1_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,2);">菜单A_2			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_2_0</h1>				<ul>					菜单A_2_0_0					菜单A_2_0_1					菜单A_2_0_2				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单A_2_1</h1>				<ul class="no">					菜单A_2_1_0					菜单A_2_1_1				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,3);">菜单A_3			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_3_0</h1>				<ul>					菜单A_3_0_0					菜单A_3_0_1				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单A_3_1</h1>				<ul class="no">					菜单A_3_1_0					菜单A_3_1_1				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,4);">菜单A_4			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_4_0</h1>				<ul>					菜单A_4_0_0					菜单A_4_0_1					菜单A_4_0_2				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单A_4_1</h1>				<ul class="no">					菜单A_4_1_0					菜单A_4_1_1				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,5);">菜单A_5			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单A_5_0</h1>				<ul>					菜单A_5_0_0					菜单A_5_0_1					菜单A_5_0_2				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单A_5_1</h1>				<ul class="no">					菜单A_5_1_0				</ul>			</span>		</li>	</ol>				<ol class="no">		<li onmouseover="javascript:ShowSpan(this,0);">菜单B_0			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单B_0_0</h1>				<ul>					菜单B_0_0_0					菜单B_0_0_1				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单B_0_1</h1>				<ul class="no">					菜单B_0_1_0					菜单B_0_1_1					菜单B_0_1_2					菜单B_0_1_3				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,1);">菜单B_1			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单B_1_0</h1>				<ul>					菜单B_1_0_0					菜单B_1_0_1				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单B_1_1</h1>				<ul class="no">					菜单B_1_1_0					菜单B_1_1_1					菜单B_1_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,2);">菜单B_2			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单B_2_0</h1>				<ul>					菜单B_2_0_0					菜单B_2_0_1				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单B_2_1</h1>				<ul class="no">					菜单B_2_1_0				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,3);">菜单B_3			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单B_3_0</h1>				<ul>					菜单B_3_0_0					菜单B_3_0_1					菜单B_3_0_2				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单B_3_1</h1>				<ul class="no">					菜单B_3_1_0					菜单B_3_1_1				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,4);">菜单B_4			<span class="no">				<h1 class="ok" onclick="javascript:ShowUl(this,0)"> - 菜单B_4_0</h1>				<ul>					菜单B_4_0_0					菜单B_4_0_1					菜单B_4_0_2					菜单B_4_0_3				</ul>				<h1 onclick ="javascript:ShowUl(this,1)"> + 菜单B_4_1</h1>				<ul class="no">					菜单B_4_1_0					菜单B_4_1_1				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,5);">菜单B_5			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单B_5_0</h1>				<ul>					菜单B_5_0_0					菜单B_5_0_1				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单B_5_1</h1>				<ul class="no">					菜单B_5_1_0					菜单B_5_1_1				</ul>			</span>		</li>	</ol>				<ol class="no">		<li onmouseover="javascript:ShowSpan(this,0);">菜单C_0			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单C_0_0</h1>				<ul>					菜单C_0_0_0					菜单C_0_0_1					菜单C_0_0_2				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单C_0_1</h1>				<ul class="no">					菜单C_0_1_0					菜单C_0_1_1					菜单C_0_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,1);">菜单C_1			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单C_1_0</h1>				<ul>					菜单C_1_0_0					菜单C_1_0_1				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单C_1_1</h1>				<ul class="no">					菜单C_1_1_0					菜单C_1_1_1					菜单C_1_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,2);">菜单C_2			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单C_2_0</h1>				<ul>					菜单C_2_0_0					菜单C_2_0_1					菜单C_2_0_3				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单C_2_1</h1>				<ul class="no">					菜单C_2_1_0					菜单C_2_1_3				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,3);">菜单C_3			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单C_3_0</h1>				<ul>					菜单C_3_0_0					菜单C_3_0_1					菜单C_3_0_3				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单C_3_1</h1>				<ul class="no">					菜单C_3_1_0					菜单C_3_1_3				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,4);">菜单C_4			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单C_4_0</h1>				<ul>					菜单C_4_0_0					菜单C_4_0_1					菜单C_4_0_3				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单C_4_1</h1>				<ul class="no">					菜单C_4_1_0					菜单C_4_1_1					菜单C_4_1_2				</ul>			</span>		</li>		<li onmouseover="javascript:ShowSpan(this,5);">菜单A_5			<span class="no">				<h1 class="ok" onclick ="javascript:ShowUl(this,0)"> - 菜单A_5_0</h1>				<ul>					菜单A_5_0_0					菜单A_5_0_3				</ul>				<h1 onclick="javascript:ShowUl(this,1)"> + 菜单A_5_1</h1>				<ul class="no">					菜单A_5_1_0					菜单A_5_1_3				</ul>			</span>		</li>	</ol></div></body></html>

上一篇：三级CSS下拉导航菜单

下一篇：经过改造的左侧竖向滑动菜单