javascript 无限级树形菜单.
很多的cms后台和shop后台的导航都很好看.
不过有时候在添加删除的时候很麻烦.本人也苦于这样.
嘿嘿本人不喜欢.net的treeview,总感觉静态的导航的话没有什么必要所以写了个树形.
js代码:
使用:
假如配合xml使用那就更好了.
不过这个对于我来说够用了.
贴出来,大家有兴趣的就改吧改吧吧.
不过有时候在添加删除的时候很麻烦.本人也苦于这样.
嘿嘿本人不喜欢.net的treeview,总感觉静态的导航的话没有什么必要所以写了个树形.
js代码:
1
var list=new Array();
2 list=[["","a0","aa1","target='blank' href='http://baidu.com/s?wd='"],["","a1","aa2","target='blank' href='http://baidu.com'"],["","a2","aa3","target='blank' href='http://baidu.com'"],["a0","2","bb","target='blank' href='http://baidu.com'"],["2","b2","bba","target='blank' href='http://baidu.com'"],["b2","b22","bbaaa","target='blank' href='http://baidu.com'"],["b2","b221","bbaaa","target='blank' href='http://baidu.com'"],["b2","b222","bbaaa","target='blank' href='http://baidu.com'"],["b2","b223","bbaaa","target='blank' href='http://baidu.com'"]];
3 function CreateObjectNode(nodeName,id,className,text)
4
{
5
var obj=document.createElement(nodeName);
6 obj.id=id;
7 obj.className=className;
8 obj.innerHTML=text;
9 return obj;
10
}
11
12 function CreateItem(oMenuList,NodeName,BoxID)
13 {
14 var list=new Array();
15 list=oMenuList;
16 var parentNode=document.getElementById(BoxID);
17
18 var len=parseInt(list.length);
19 for(i=0;i<len;i++)
20
{
21
22 if(list[i][0]==NodeName){
23 var topBoxID=list[i][1]+i+"Top";
24 var itemBoxID=list[i][1]+i+"Item";
25 var titleBoxID=list[i][1]+i+"Title";
26
27 //create top-box
28 if(!document.getElementById(titleBoxID))
29 {
30
var item=CreateObjectNode("div",topBoxID,"","");}
31
32 //create title-box
33 if(!document.getElementById(titleBoxID))
34 {var itemObj=CreateObjectNode("div",titleBoxID,"","-<a "+list[i][3]+" onclick=\"CreateSingleMenu('"+list[i][1]+"','"+itemBoxID+"');\">"+list[i][2]+"</a>");
35 item.appendChild(itemObj);}
36 //create item-box
37 if(!document.getElementById(itemBoxID))
38 { var itemObjItem=CreateObjectNode("div",itemBoxID,"","");
39 //itemObj.onclick="CreateSingleMenu('"+list[i][1]+"','"+itemBoxID+"')";
40
41
42 item.appendChild(itemObjItem);}
43
44 parentNode.appendChild(item);
45 }
46 }
47 }
48 function CreateSingleMenu(NodeName,BoxID)
49 {
50 var child=document.getElementById(BoxID).childNodes;
51 for(i=0;i<child.length;i++)
52 {child[i].innerHTML="";document.getElementById(BoxID).removeChild(child[i])}
53 if(NodeName=="")
54 {document.getElementById(BoxID).innerHTML="<a onclick=\"CreateSingleMenu('','box');\">clean</a>";}
55 CreateItem(list,NodeName,BoxID)
56 }
57 CreateSingleMenu("","box");
var list=new Array();2
list=[["","a0","aa1","target='blank' href='http://baidu.com/s?wd='"],["","a1","aa2","target='blank' href='http://baidu.com'"],["","a2","aa3","target='blank' href='http://baidu.com'"],["a0","2","bb","target='blank' href='http://baidu.com'"],["2","b2","bba","target='blank' href='http://baidu.com'"],["b2","b22","bbaaa","target='blank' href='http://baidu.com'"],["b2","b221","bbaaa","target='blank' href='http://baidu.com'"],["b2","b222","bbaaa","target='blank' href='http://baidu.com'"],["b2","b223","bbaaa","target='blank' href='http://baidu.com'"]];3
function CreateObjectNode(nodeName,id,className,text)4
{
5
var obj=document.createElement(nodeName);6
obj.id=id;7
obj.className=className;8
obj.innerHTML=text;9
return obj;10
}11
12
function CreateItem(oMenuList,NodeName,BoxID)13
{14
var list=new Array();15
list=oMenuList;16
var parentNode=document.getElementById(BoxID);17
18
var len=parseInt(list.length);19
for(i=0;i<len;i++)20
{
21
22
if(list[i][0]==NodeName){23
var topBoxID=list[i][1]+i+"Top";24
var itemBoxID=list[i][1]+i+"Item";25
var titleBoxID=list[i][1]+i+"Title";26
27
//create top-box28
if(!document.getElementById(titleBoxID))29
{30
var item=CreateObjectNode("div",topBoxID,"","");}31
32
//create title-box33
if(!document.getElementById(titleBoxID))34
{var itemObj=CreateObjectNode("div",titleBoxID,"","-<a "+list[i][3]+" onclick=\"CreateSingleMenu('"+list[i][1]+"','"+itemBoxID+"');\">"+list[i][2]+"</a>");35
item.appendChild(itemObj);}36
//create item-box37
if(!document.getElementById(itemBoxID))38
{ var itemObjItem=CreateObjectNode("div",itemBoxID,"","");39
//itemObj.onclick="CreateSingleMenu('"+list[i][1]+"','"+itemBoxID+"')";40
41
42
item.appendChild(itemObjItem);}43
44
parentNode.appendChild(item);45
}46
}47
}48
function CreateSingleMenu(NodeName,BoxID)49
{50
var child=document.getElementById(BoxID).childNodes;51
for(i=0;i<child.length;i++)52
{child[i].innerHTML="";document.getElementById(BoxID).removeChild(child[i])}53
if(NodeName=="")54
{document.getElementById(BoxID).innerHTML="<a onclick=\"CreateSingleMenu('','box');\">clean</a>";}55
CreateItem(list,NodeName,BoxID)56
}57
CreateSingleMenu("","box");使用:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>变色导航栏</title>
6<script type="text/javascript" src="javascript/js.js" />
7 <style type="text/css">
8.nav{
9 width:200px;
10 height:auto;
11 margin:0px;
12 top:0px;
13 background: #2F5F8E;
14}
15.nav dl{
16 cursor: auto;
17}
18div{padding-left:10px;}
19div a{cursor: hand;}
20.nav dl dt{
21 font: bold 14px "Times New Roman", Times, serif;
22 color: #333333;
23 text-transform: capitalize;
24 background:#CCC;
25 text-indent: 10px;
26 cursor: hand;
27}
28.cccBG{
29 background: #CCCCCC;
30}
31.fffBG{
32 background: #FFFFFF;
33}
34.nav dl dd{
35 font: 12px Arial, Helvetica, sans-serif;
36 color: #FFFFFF;
37 cursor: hand;
38}
39a:link {
40 text-decoration: none;
41}
42a:visited {
43 text-decoration: none;
44}
45a:hover {
46 text-decoration: none;
47 color: #993300;
48}
49a:active {
50 text-decoration: none;
51}
52</style>
53</head>
54<body>
55 <div id="box" class="nav">
56 </div>
57</body>
58</html>
简单的实现了.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>变色导航栏</title>6
<script type="text/javascript" src="javascript/js.js" />7
<style type="text/css">8
.nav{9
width:200px;10
height:auto;11
margin:0px;12
top:0px;13
background: #2F5F8E;14
}15
.nav dl{16
cursor: auto;17
}18
div{padding-left:10px;}19
div a{cursor: hand;}20
.nav dl dt{21
font: bold 14px "Times New Roman", Times, serif;22
color: #333333;23
text-transform: capitalize;24
background:#CCC;25
text-indent: 10px;26
cursor: hand;27
}28
.cccBG{29
background: #CCCCCC;30
}31
.fffBG{32
background: #FFFFFF;33
}34
.nav dl dd{35
font: 12px Arial, Helvetica, sans-serif;36
color: #FFFFFF;37
cursor: hand;38
}39
a:link {40
text-decoration: none;41
}42
a:visited {43
text-decoration: none;44
}45
a:hover {46
text-decoration: none;47
color: #993300;48
}49
a:active {50
text-decoration: none;51
}52
</style>53
</head>54
<body>55
<div id="box" class="nav">56
</div>57
</body>58
</html>假如配合xml使用那就更好了.
不过这个对于我来说够用了.
贴出来,大家有兴趣的就改吧改吧吧.
H.Wong
-2010
