根据网友提示导航要由后台来生成，我修改后重新发布。有什么问题请提出来我们共同的进步。
效果如下：
html部分：
Css部分代码：
js部分代码：
菜单修改版.rar
( 2.5 KB 下载：32 次 )
AD：真正免费，域名+虚机+企业邮箱=0元
01菜单
- JavaScript
- JAVA
- SSH
- 前段设计
- PHP
- ASP
- THINKPHP
- Jquery,Ajax,Other,More,MoreAnd
- 基础,Swing,Applet,More
- Spring,Habernate,Struct
- HTMl,CSS,SCRIPT
- 基础,框架,其他
-
- HTMl,CSS,SCRIPT
- http://www.cutewindow.com,#,#,#,#
- #,#,#,#
- #,#,#
- #,#,#
- #,#,#
-
- #,#,#
@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;
}//制作人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);
}
}
}