js导航
- WBOY原創
- 2016-06-07 11:42:011210瀏覽
根据网友提示导航要由后台来生成，我修改后重新发布。有什么问题请提出来我们共同的进步。
效果如下：
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元