教程集 > 脚本编程 > javascript > 正文导航菜单-横竖结合的折叠下拉导航菜单效果

导航菜单-横竖结合的折叠下拉导航菜单效果

发布时间：2016-10-20 编辑：jiaochengji.com

教程集为您提供导航菜单-横竖结合的折叠下拉导航菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的导航菜单-横竖结合的折叠下拉导航菜单效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>导航菜单-横竖结合的折叠下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> </style> <script language="javascript">

<span>菜单A</span>

<span>菜单B</span>

<span>菜单C</span>

<ol> <li onmouseover="javascript:ShowSpan(this,0);">菜单A_0 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_0_0</h1> <ul> 菜单A_0_0_0 菜单A_0_0_1 菜单A_0_0_2 菜单A_0_0_3 </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 菜单A_0_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,1);">菜单A_1 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_1_0</h1> <ul> 菜单A_1_0_0 菜单A_1_0_1 菜单A_1_0_2 菜单A_1_0_3 </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 菜单A_1_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,2);">菜单A_2 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_2_0</h1> <ul> 菜单A_2_0_0 菜单A_2_0_1 菜单A_2_0_2 菜单A_2_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单A_2_1</h1> <ul class="no"> 菜单A_2_1_0 菜单A_2_1_1 菜单A_2_1_2 菜单A_2_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,3);">菜单A_3 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_3_0</h1> <ul> 菜单A_3_0_0 菜单A_3_0_1 菜单A_3_0_2 菜单A_3_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单A_3_1</h1> <ul class="no"> 菜单A_3_1_0 菜单A_3_1_1 菜单A_3_1_2 菜单A_3_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,4);">菜单A_4 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_4_0</h1> <ul> 菜单A_4_0_0 菜单A_4_0_1 菜单A_4_0_2 菜单A_4_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单A_4_1</h1> <ul class="no"> 菜单A_4_1_0 菜单A_4_1_1 菜单A_4_1_2 菜单A_4_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,5);">菜单A_5 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_5_0</h1> <ul> 菜单A_5_0_0 菜单A_5_0_1 菜单A_5_0_2 菜单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_1 菜单A_5_1_2 菜单A_5_1_3 </ul> </span> </li> </ol> <ol class="no"> <li onmouseover="javascript:ShowSpan(this,0);">菜单B_0 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单B_0_0</h1> <ul> 菜单B_0_0_0 菜单B_0_0_1 菜单B_0_0_2 菜单B_0_0_3 </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 onclick="javascript:ShowUl(this,0)"> - 菜单B_1_0</h1> <ul> 菜单B_1_0_0 菜单B_1_0_1 菜单B_1_0_2 菜单B_1_0_3 </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 菜单B_1_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,2);">菜单B_2 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单B_2_0</h1> <ul> 菜单B_2_0_0 菜单B_2_0_1 菜单B_2_0_2 菜单B_2_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单B_2_1</h1> <ul class="no"> 菜单B_2_1_0 菜单B_2_1_1 菜单B_2_1_2 菜单B_2_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,3);">菜单B_3 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单B_3_0</h1> <ul> 菜单B_3_0_0 菜单B_3_0_1 菜单B_3_0_2 菜单B_3_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单B_3_1</h1> <ul class="no"> 菜单B_3_1_0 菜单B_3_1_1 菜单B_3_1_2 菜单B_3_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,4);">菜单B_4 <span class="no"> <h1 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 菜单B_4_1_2 菜单B_4_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,5);">菜单B_5 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单B_5_0</h1> <ul> 菜单B_5_0_0 菜单B_5_0_1 菜单B_5_0_2 菜单B_5_0_3 </ul> <h1 onclick="javascript:ShowUl(this,1)"> 菜单B_5_1</h1> <ul class="no"> 菜单B_5_1_0 菜单B_5_1_1 菜单B_5_1_2 菜单B_5_1_3 </ul> </span> </li> </ol> <ol class="no"> <li onmouseover="javascript:ShowSpan(this,0);">菜单C_0 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单C_0_0</h1> <ul> 菜单C_0_0_0 菜单C_0_0_1 菜单C_0_0_2 菜单C_0_0_3 </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 菜单C_0_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,1);">菜单C_1 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单C_1_0</h1> <ul> 菜单C_1_0_0 菜单C_1_0_1 菜单C_1_0_2 菜单C_1_0_3 </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 菜单C_1_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,2);">菜单C_2 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单C_2_0</h1> <ul> 菜单C_2_0_0 菜单C_2_0_1 菜单C_2_0_2 菜单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_1 菜单C_2_1_2 菜单C_2_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,3);">菜单C_3 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单C_3_0</h1> <ul> 菜单C_3_0_0 菜单C_3_0_1 菜单C_3_0_2 菜单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_1 菜单C_3_1_2 菜单C_3_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,4);">菜单C_4 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单C_4_0</h1> <ul> 菜单C_4_0_0 菜单C_4_0_1 菜单C_4_0_2 菜单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 菜单C_4_1_3 </ul> </span> </li> <li onmouseover="javascript:ShowSpan(this,5);">菜单A_5 <span class="no"> <h1 onclick="javascript:ShowUl(this,0)"> - 菜单A_5_0</h1> <ul> 菜单A_5_0_0 菜单A_5_0_1 菜单A_5_0_2 菜单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_1 菜单A_5_1_2 菜单A_5_1_3 </ul> </span> </li> </ol>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
导航菜单-横竖结合的折叠下拉导航菜单效果
 7款风格新颖的jQuery/CSS3菜单导航分享
 jQuery菜单插件 Smooth Navigational Menu
导航菜单-三级折叠竖向下拉导航菜单效果
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 jquery 遮罩层效果实现的导航菜单
 css div布局的好处与优势是什么？
jQuery导航菜单插件 AutoSprites
css 水平横向导航菜单效果
 javascript 无限级横向下拉导航菜单效果

上一篇：javasctipt 漂亮的感应鼠标导航菜单下一篇：导航菜单-三级折叠竖向下拉导航菜单效果

[关闭]

最近更新

浏览排行

~ ~