教程集 > 脚本编程 > 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"> *,body,ul,li,h1,h2{margin:0;padding:0;list-style:none;} body{font:12px "宋体";padding-top:20px;} #menu{width:200px;margin:auto;} #menu h1{cursor:pointer;color:#FFF;font-size:12px;padding:5px 0 3px 10px;border:#C60 1px solid;margin-top:1px;background-color:#F93;} #menu h2{cursor:pointer;color:#777;font-size:12px;padding:5px 0 3px 10px;border:#E7E7E7 1px solid;border-top-color:#FFF;background-color:#F4F4F4;} #menu ul{padding-left:15px;height:100px;border:#E7E7E7 1px solid;border-top:none;overflow:auto;} #menu ul li{padding:5px 0 3px 10px;} .no{display:none;} </style> <script language="JavaScript">

<h1 onclick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1> <span id="NO0" class="no"> <h2 onclick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2> <ul id="NO00" class="no"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2> <ul id="NO01" class="no"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2> <ul id="NO02" class="no"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2> <ul id="NO03" class="no"> <li>一级菜单A_0</li> <li>一级菜单A_1</li> <li>一级菜单A_2</li> <li>一级菜单A_3</li> <li>一级菜单A_4</li> <li>一级菜单A_5</li> <li>一级菜单A_6</li> <li>一级菜单A_7</li> <li>一级菜单A_8</li> <li>一级菜单A_9</li> </ul> </span> <h1 onclick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1> <span id="NO1" class="no"> <h2 onclick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2> <ul id="NO10" class="no"> <li>二级菜单B_0</li> <li>二级菜单B_1</li> <li>二级菜单B_2</li> <li>二级菜单B_3</li> <li>二级菜单B_4</li> <li>二级菜单B_5</li> <li>二级菜单B_6</li> <li>二级菜单B_7</li> <li>二级菜单B_8</li> <li>二级菜单B_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2> <ul id="NO11" class="no"> <li>二级菜单B_0</li> <li>二级菜单B_1</li> <li>二级菜单B_2</li> <li>二级菜单B_3</li> <li>二级菜单B_4</li> <li>二级菜单B_5</li> <li>二级菜单B_6</li> <li>二级菜单B_7</li> <li>二级菜单B_8</li> <li>二级菜单B_9</li> </ul> </span> <h1 onclick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1> <span id="NO2" class="no"> <h2 onclick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2> <ul id="NO20" class="no"> <li>三级菜单C_0</li> <li>三级菜单C_1</li> <li>三级菜单C_2</li> <li>三级菜单C_3</li> <li>三级菜单C_4</li> <li>三级菜单C_5</li> <li>三级菜单C_6</li> <li>三级菜单C_7</li> <li>三级菜单C_8</li> <li>三级菜单C_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2> <ul id="NO21" class="no"> <li>三级菜单C_0</li> <li>三级菜单C_1</li> <li>三级菜单C_2</li> <li>三级菜单C_3</li> <li>三级菜单C_4</li> <li>三级菜单C_5</li> <li>三级菜单C_6</li> <li>三级菜单C_7</li> <li>三级菜单C_8</li> <li>三级菜单C_9</li> </ul> </span> <h1 onclick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1> <span id="NO3" class="no"> <h2 onclick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2> <ul id="NO30" class="no"> <li>四级菜单D_0</li> <li>四级菜单D_1</li> <li>四级菜单D_2</li> <li>四级菜单D_3</li> <li>四级菜单D_4</li> <li>四级菜单D_5</li> <li>四级菜单D_6</li> <li>四级菜单D_7</li> <li>四级菜单D_8</li> <li>四级菜单D_9</li> </ul> <h2 onclick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2> <ul id="NO31" class="no"> <li>四级菜单D_0</li> <li>四级菜单D_1</li> <li>四级菜单D_2</li> <li>四级菜单D_3</li> <li>四级菜单D_4</li> <li>四级菜单D_5</li> <li>四级菜单D_6</li> <li>四级菜单D_7</li> <li>四级菜单D_8</li> <li>四级菜单D_9</li> </ul> </span>

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

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

您可能感兴趣的文章：
导航菜单-三级折叠竖向下拉导航菜单效果
 导航菜单-横竖结合的折叠下拉导航菜单效果
 jQuery菜单插件 Smooth Navigational Menu
7款风格新颖的jQuery/CSS3菜单导航分享
 javascript 无限级横向下拉导航菜单效果
 网站后台的竖向二级下拉导航菜单
 jquery 遮罩层效果实现的导航菜单
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 jquery下拉菜单实现代码(折叠菜单修改)
jQuery导航菜单插件 AutoSprites

上一篇：导航菜单-横竖结合的折叠下拉导航菜单效果下一篇：仿猪八戒网首页导航菜单

[关闭]

导航菜单-三级折叠竖向下拉导航菜单效果

最近更新

浏览排行