很多的cms后台和shop后台的导航都很好看.
不过有时候在添加删除的时候很麻烦.本人也苦于这样.
嘿嘿本人不喜欢.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");
使用:
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>
简单的实现了.
假如配合xml使用那就更好了.
不过这个对于我来说够用了.
贴出来,大家有兴趣的就改吧改吧吧.
posted on 2008-06-30 17:50
Herman.Wong 阅读(319)
评论(0) 编辑 收藏 所属分类:
js+xml相关