js导航-php手册-php.cn

js导航

WBOY

Libérer： 2016-06-07 11:42:01

original

1152 Les gens l'ont consulté

根据网友提示导航要由后台来生成，我修改后重新发布。有什么问题请提出来我们共同的进步。
效果如下：
js导航
html部分： <meta> <title>01菜单</title> <link> <script></script> <div>  <ul> <li><a>JavaScript</a></li> <li><a>JAVA</a></li> <li><a>SSH</a></li> <li><a>前段设计</a></li> <li><a>PHP</a></li> <li><a>ASP</a></li> <li><a>THINKPHP</a></li> </ul>  <div>  <ul> <li>Jquery,Ajax,Other,More,MoreAnd</li> <li>基础,Swing,Applet,More</li> <li>Spring,Habernate,Struct</li> <li>HTMl,CSS,SCRIPT</li> <li>基础,框架,其他</li> <li> <li>HTMl,CSS,SCRIPT</li> </ul>  <ul> <li>http://www.cutewindow.com,#,#,#,#</li> <li>#,#,#,#</li> <li>#,#,#</li> <li>#,#,#</li> <li>#,#,#</li> <li> <li>#,#,#</li> </ul> </div>  <div></div> </div> Css部分代码：@charset "utf-8"; /* CSS Document */ #nav_1{ margin:0 auto 0 auto; width:900px; height:30px; background:#CC6; } #nav_1 ul{ padding-left:100px; } #nav_1 ul li{ padding-top:3px; padding-bottom:3px; width:100px; height:20px; float:left; background:#9F6; list-style:none; text-align:center; } #nav_1 ul li:hover{ background:#CC6; } #nav_1 ul li a{ font-family:微软雅黑; text-decoration:none; } #nav_1_js{ width:100px; margin-left:100px; background:#CC6; display:none; font-family:微软雅黑; } #nav_1_js li{ width:50px; font-size:15px; font-weight:10px; list-style:none; margin-left:20px; text-align:center; border-bottom:1px solid #9FF; } #nav_1_js li a{ text-decoration:none; } #nav_1_js li a:hover{ color:lightyellow; } #nav_m{ display:none; }js部分代码：//制作人yh4494 www.cutewindow.com var cDan = Array(); //存放下拉菜单数数据 var cLian = Array(); //存放下拉菜单所对应得数组 //从nav_m中加载数组 function loadArr(){ var oDivLoad = document.getElementById("nav_m"); var oUl2 = oDivLoad.getElementsByTagName("ul")[0]; var oUl3 = oDivLoad.getElementsByTagName("ul")[1]; var aLi4 = oUl2.getElementsByTagName("li"); var aLi5 = oUl3.getElementsByTagName("li"); //初始化数组 for(var a = 0;a for(var j = 0;j cDan[j] = aLi4[j].innerHTML.split(","); cLian[j] = aLi5[j].innerHTML.split(","); } } window.onload = function(){ //----------------加载DOM---------------- var aUl1 = document.getElementById("uL1"); var oDiv = document.getElementById("nav_1_js"); var aLi1 = aUl1.getElementsByTagName("li"); var aLi2 = oDiv.getElementsByTagName("a"); var t; loadArr(); for(var i = 0;i aLi1[i].index = i; aLi1[i].onmouseover = function(){ oDiv.style.display = "block"; oDiv.style.marginLeft = "" + (this.index + 1)*100 + "px"; if(aLi2.length > 0) del(); clearTimeout(t); for(var j = 0;j if(j >= aLi2.length){ //创建节点 var aLi3 = document.createElement("li"); var aA1 = document.createElement("a"); //添加到父类节点中去 oDiv.appendChild(aLi3); aLi3.appendChild(aA1); aA1.href = cLian[this.index][j]; aA1.innerHTML = cDan[this.index][j]; continue; } aLi2[j].innerHTML = cDan[this.index][j]; aLi2[j].href = cLian[this.index][j]; } } oDiv.onmouseout = aLi1[i].onmouseout = function(){ t = setTimeout(function Time(){ del(); oDiv.style.display = "none"; },100); } } oDiv.onmouseover = function(){ clearTimeout(t); } //删除所有的节点 function del(){ for(var q = 0;q oDiv.removeChild(aLi2[q].parentNode); } } }