教程集 > 脚本编程 > javascript > 正文 javascript 无限级横向下拉导航菜单效果

javascript 无限级横向下拉导航菜单效果

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

教程集为您提供javascript 无限级横向下拉导航菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript 无限级横向下拉导航菜单效果资源

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

<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{margin:0;padding:0;list-style:none;} body{font:12px Arial;background:#000;} a{border:none;color:#FFF;text-decoration:none;} .menu{width:980px;margin:auto;background:url("http://www.zzsky.cn/effect/images/201003212210_menu.gif") repeat-x 0 0;} #menu{padding-left:210px;background:url("http://www.zzsky.cn/effect/images/201003212210_menu.gif") no-repeat 0 -36px;height:36px;} #menu li{float:left;;} #menu li a{display:block;clear:both;font-size:14px;padding-right:14px;} #menu li a strong{display:inline-block;height:16px;padding:15px 0 5px 15px;overflow:hidden;} #menu li a:hover, #menu li a.ok{background:url("http://www.zzsky.cn/effect/images/201003212210_menu.gif") no-repeat right -72px;} #menu li a:hover strong, #menu li a.ok strong{ padding:8px 0 12px 15px; background:url("http://www.zzsky.cn/effect/images/201003212210_menu.gif") no-repeat 0 -72px; } #menu li ul{display:none;width:125px;position:absolute;background-color:#D9D9D9;} #menu li ul li{float:none;vertical-align:top;overflow:hidden;} #menu li ul li a{ float:left; width:115px; _float:none; _display:inline-block; padding:7px 0 4px 10px; text-align:left; font-size:12px; border-bottom:#000 1px solid; overflow:hidden; } #menu li ul li a:hover{background-image:none;background-color:#F00;} #menu li ul li ul{left:125px;} </style> <script language="javascript"> var Menu = ["menu"]; window.onload = function(){ var li = document.getElementById(Menu).getElementsByTagName("li"); for(var i=0;i<li.length;i ){ var li_ul = li[i].getElementsByTagName("ul"); if(li_ul.length){ li[i].onmouseout = function(){ this.getElementsByTagName("a")[0].style.backgroundColor = ""; this.getElementsByTagName("ul")[0].style.display ="none"; } if(li[i].parentNode.id!=Menu){ li[i].onmouseover= function(){ this.getElementsByTagName("a")[0].style.backgroundColor = "#F00"; this.getElementsByTagName("ul")[0].style.display ="block"; } } } } } function ShowMenu(obj){ var li = document.getElementById(Menu).getElementsByTagName("li"); for(var c=0;c

<ul id="menu"> <li onmouseover="javascript:ShowMenu(this)">二级菜单B <ul> <li>二级菜单B_1 <ul> <li>二级菜单B_1_1 <ul> <li>二级菜单B_1_1_1</li> <li>二级菜单B_1_1_2</li> <li>二级菜单B_1_1_3</li> <li>二级菜单B_1_1_4</li> <li>二级菜单B_1_1_5</li> <li>二级菜单B_1_1_6</li> </ul> </li> <li>二级菜单B_1_1 <ul> <li>二级菜单B_1_2_1</li> <li>二级菜单B_1_2_2</li> <li>二级菜单B_1_2_3</li> <li>二级菜单B_1_2_4</li> <li>二级菜单B_1_2_5</li> <li>二级菜单B_1_2_6</li> </ul> </li> <li>二级菜单B_1_1 <ul> <li>二级菜单B_1_3_1</li> <li>二级菜单B_1_3_2</li> <li>二级菜单B_1_3_3</li> <li>二级菜单B_1_3_4</li> <li>二级菜单B_1_3_5</li> <li>二级菜单B_1_3_6</li> </ul> </li> </ul> </li> <li>二级菜单B_2 <ul> <li>二级菜单B_2_1</li> <li>二级菜单B_2_2</li> <li>二级菜单B_2_3</li> <li>二级菜单B_2_4</li> <li>二级菜单B_2_5</li> <li>二级菜单B_2_6</li> </ul> </li> </ul> </li> <li onmouseover="javascript:ShowMenu(this)">三级菜单C <ul> <li>三级菜单C_1 <ul> <li>三级菜单C_1_1 <ul> <li>三级菜单C_1_1_1</li> <li>三级菜单C_1_1_2</li> <li>三级菜单C_1_1_3</li> <li>三级菜单C_1_1_4</li> <li>三级菜单C_1_1_5</li> <li>三级菜单C_1_1_6</li> </ul> </li> <li>三级菜单C_1_1 <ul> <li>三级菜单C_1_2_1</li> <li>三级菜单C_1_2_2</li> <li>三级菜单C_1_2_3</li> <li>三级菜单C_1_2_4</li> <li>三级菜单C_1_2_5</li> <li>三级菜单C_1_2_6</li> </ul> </li> <li>三级菜单C_1_1 <ul> <li>三级菜单C_1_3_1</li> <li>三级菜单C_1_3_2</li> <li>三级菜单C_1_3_3</li> <li>三级菜单C_1_3_4</li> <li>三级菜单C_1_3_5</li> <li>三级菜单C_1_3_6</li> </ul> </li> </ul> </li> <li>三级菜单C_2 <ul> <li>三级菜单C_2_1</li> <li>三级菜单C_2_2</li> <li>三级菜单C_2_3</li> <li>三级菜单C_2_4</li> <li>三级菜单C_2_5</li> <li>三级菜单C_2_6</li> </ul> </li> </ul> </li> </ul>

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

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

您可能感兴趣的文章：
javascript 无限级横向下拉导航菜单效果
 jQuery菜单插件 Smooth Navigational Menu
7款风格新颖的jQuery/CSS3菜单导航分享
 jQuery水平下拉菜单 jMenu
导航菜单-三级折叠竖向下拉导航菜单效果
 javascript 无限级下拉导航菜单效果
 横向javascript下拉二级菜单效果
 css 水平横向导航菜单效果
 导航菜单-横竖结合的折叠下拉导航菜单效果
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

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

[关闭]

javascript 无限级横向下拉导航菜单效果

最近更新

浏览排行