js导航

根据网友提示导航要由后台来生成，我修改后重新发布。有什么问题请提出来我们共同的进步。
效果如下：

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

菜单修改版.rar ( 2.5 KB 下载：32 次 )

AD：真正免费，域名+虚机+企业邮箱=0元