一級橫向滑動，二級豎向下拉綜合菜單

2024-09-05 12:20:33

字體：大中小

供稿：網(wǎng)友

一級橫向滑動，二級豎向下拉綜合菜單，這個菜單一共是三級，前兩級是滑動切換的方式，第三級主要是下拉菜單的形式，雖然簡單的樣式簡約，但是實現(xiàn)他們其實是很復(fù)雜的，希望從事前端開發(fā)的朋友一同參考一下吧。

<!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   class="iwvjtn8m0"   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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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 id="iwvjtn8m0"    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下拉導(dǎo)航菜單

下一篇：經(jīng)過改造的左側(cè)豎向滑動菜單