javascript 无限级树形菜单.

很多的cms后台和shop后台的导航都很好看.
不过有时候在添加删除的时候很麻烦.本人也苦于这样.
嘿嘿本人不喜欢.net的treeview,总感觉静态的导航的话没有什么必要所以写了个树形.
js代码:

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

function CreateItem(oMenuList,NodeName,BoxID)
13

{
14

var list=new Array();
15

list=oMenuList;
16

var parentNode=document.getElementById(BoxID);
17

var len=parseInt(list.length);
19

for(i=0;i<len;i++)
20

{
21

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

//create top-box
28

if(!document.getElementById(titleBoxID))
29

{
30

var item=CreateObjectNode("div",topBoxID,"","");}
31

//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

item.appendChild(itemObjItem);}
43

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");

使用:

<!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

<title>变色导航栏</title>
6

.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使用那就更好了.
不过这个对于我来说够用了.
贴出来,大家有兴趣的就改吧改吧吧.

posted on 2008-06-30 17:50 H.Wong 阅读(1188) 评论(0) 编辑收藏举报

刷新页面返回顶部

H.Wong

导航

公告

javascript 无限级树形菜单.