上记得写这个的原因是因为网上的导航大多都不符合自己的要求，所以自己就写了一个。时间好像2009年的了。废话少说，上代码：
将以下JS代码保存为xmlNav.js
View Code
1 // JavaScript Document
2
3 XmlNav=function()
4 {
5 //----------------------------------------------一些默认的属性值和常量-start
6 var nodeLevel=0;//节点级别，默认为0
7 var navCssText_ul="cursor:pointer;width:100;height:20;";
8 var navCssText_li="background-color:#ccc;border:1px solid #999;";
9 var bgColorWhenOver="#FFFFFF";
10 var bgColorWhenOut="#CCCCCC";
11 var target="_blank";
12 var navCssBasic_ul="padding:0;margin:0;position:absolute;z-index:9999;visibility:visible;list-style-type:none";
13 var navCssBasic_li="position:relative;z-index:9999;padding:-1 0 0 0;margin:-1 0 0 0;";
14 this.LAYOUT_UP="UP";//导航弹出的方向，给对象调用
15 this.LAYOUT_DOWN="DOWN";//导航弹出的方向，给对象调用
16 this.LAYOUT_LEFT="LEFT";//导航弹出的方向，给对象调用
17 this.LAYOUT_RIGHT="RIGHT"; //导航弹出的方向，给对象调用
18 //----------------------------------------------一些默认的属性值和常量-stop
19 //----------------------------------------------变量合集-start
20 this.el;//页面显示的控件
21 this.xmlUrl;//XML的路径
22 this.ulCssText;//整个导航以UL和LI来组成，所以可以自定义它们的CSS属性
23 this.liCssText;//整个导航以UL和LI来组成，所以可以自定义它们的CSS属性
24 this.layout;//当前导航弹出的方向
25 this.colorWhenOver;//当鼠标移悬浮在导航时的背景颜色
26 this.colorWhenOut;//当鼠标移开时的背景颜色
27 this.hrefTarget;//每个导航连接的打开的目标
28
29 var mylayout;//NAV私有变量，接收this.layout的值
30 var firstNodeLenth;//XML文档内一级节点的长度，也即是根节点的子节点长度
31 //----------------------------------------------变量合集-stop
32
33 this.create=function()
34 {
35 /*各种属性的初始化*/
36 this.el=typeof(this.el)=="object"?this.el:document.getElementById(this.el);//假如传进来的不是一个有效的对象，那么是一个对象的ID
37 mylayout=!this.layout?this.LAYOUT_DOWN:this.layout;
38 navCssText_ul=!this.ulCssText?navCssText_ul:this.ulCssText;
39 navCssText_li=!this.liCssText?navCssText_li:this.liCssText;
40 navCssText_ul+=navCssBasic_ul;
41 navCssText_li+=navCssBasic_li;
42
43 bgColorWhenOver=!this.colorWhenOver?bgColorWhenOver:this.colorWhenOver;
44 bgColorWhenOut=!this.colorWhenOut?bgColorWhenOut:this.colorWhenOut;
45 target=!this.hrefTarget?target:this.hrefTarget;
46
47 var xmlDom=getXml(this.xmlUrl);
48 if(xmlDom)
49 {
50 var nodes=xmlDom.documentElement;
51 nodes=cleanWhitespace(nodes);
52 firstNodeLenth=nodes.childNodes.length;
53 createNode(this.el,nodes,nodeLevel);
54 }
55 }
56 /*判断浏览器函数*/
57 var getBrowser=function()
58 {
59 var Sys = {};
60 var ua = navigator.userAgent.toLowerCase();
61 var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
62 var m = ua.match(re);
63 Sys.browser = m[1].replace(/version/, "'safari");
64 Sys.ver = m[2];
65 return Sys;
66 }
67 var sys = getBrowser();
68 /*XML空白缩进处理，由于IE与非IE浏览器对XML空白缩进的处理不一样那么将统一使用本函数做清除空白缩进处理*/
69 var cleanWhitespace = function(node)
70 {
71 var notWhitespace = /\S/;
72 for (var i=0; i < node.childNodes.length; i++)
73 {
74 var childNode = node.childNodes[i];
75 if ((childNode.nodeType == 3)&&(!notWhitespace.test( childNode.nodeValue)))
76 {
77 node.removeChild(node.childNodes[i]);
78 i--;
79 }
80 if (childNode.nodeType == 1)
81 {
82 cleanWhitespace(childNode);
83 }
84 }
85 return node;
86 }
87 /*加载XML的函数，将返回一个DOM*/
88 var getXml=function(xmlUrl)
89 {
90 var xmlDoc;
91 xmlDoc=sys.browser=="msie"?new ActiveXObject("Microsoft.XMLDOM"):document.implementation.createDocument("","",null);//判断XML的加载方式
92 xmlDoc.async=false;
93 xmlDoc.load(xmlUrl);
94 return(xmlDoc);
95 }
96
97 /*主函数，遍历每个XML节点而创建导航每个节点，递归遍历，从而实现无限导航无限扩展，也可以根据这个思想来转变为一颗XML树*/
98 var createNode=function(parentNode,nodes,nodeLevel)
99 {
100 var ul=document.createElement("ul");
101 var x=parentNode.getBoundingClientRect().left;//节点的左上角的X轴值
102 var y=parentNode.getBoundingClientRect().top;//节点的左上角的Y轴值
103 var borderWidth=parentNode.style.borderWidth;
104 var w=parentNode.style.width;
105 var h=parentNode.style.height;
106 borderWidth=borderWidth!=""?parseInt(borderWidth.substring(0,1)):1; //获取边框的单位是四条边的值，所以我只要第一个只可
107 w=w!=""?parseInt(w.replace("px","")):100;//获取的宽度带单位所以要清除PX
108 h=h!=""?parseInt(h.replace("px","")):25;
109 ul.style.cssText=navCssText_ul;
110 ul.style.visibility=nodeLevel==0?"visible":"hidden";//假如为根节点，那么节点显示，否则隐藏
111
112 //------------------------------------------------设置导航弹出的方向---开始
113 if(nodeLevel==0)
114 {
115 ul.style.left=x-borderWidth*2;
116 ul.style.top=y-borderWidth*2;
117 }
118 else if(nodeLevel==1)
119 {
120 if(mylayout=="UP")
121 {
122 ul.style.top=y-h*firstNodeLenth-firstNodeLenth;
123 ul.style.left=x-borderWidth;
124 }
125 else if(mylayout=="DOWN")
126 {
127 ul.style.top=y+h;
128 ul.style.left=x-borderWidth;
129 }
130 else if(mylayout=="LEFT")
131 {
132 ul.style.top=h/5;
133 ul.style.left=sys.browser=="msie"?x-w:x-w-borderWidth*2;
134 }
135 else if(mylayout=="RIGHT")
136 {
137 ul.style.top=h/5;
138 ul.style.left=sys.browser=="msie"?x+w-borderWidth*2:x+w;
139 }
140 else
141 {
142 ul.style.top=y+h;
143 ul.style.left=x-borderWidth;
144 }
145 }
146 else
147 {
148 if(mylayout=="LEFT")
149 {
150 ul.style.left=sys.browser=="msie"?0-w:0-w-borderWidth*2;
151 ul.style.top=h/5;
152 }
153 else
154 {
155 ul.style.left=sys.browser=="msie"?w-borderWidth*2:w;
156 ul.style.top=h/5;
157 }
158 }
159 //------------------------------------------------设置导航弹出的方向---结束
160 if(nodeLevel==0)//创建导航的根节点，之所以不写在FOR循环里，那是因为加入XML节点过多，那么每次递归都判断一次，将会浪费资源
161 {
162 var nodeNameValue=nodes.getAttribute("name")!=null?nodes.getAttribute("name"):nodes.nodeName;
163 var nodeUrlValue=nodes.getAttribute("href")!=null?nodes.getAttribute("href"):"#";
164 var li=document.createElement("li");
165 var links=document.createElement("a");
166 var nodeName=document.createTextNode(nodeNameValue);
167 links.setAttribute("href",nodeUrlValue);
168 links.setAttribute("target",target);
169 links.appendChild(nodeName);
170 li.style.cssText=navCssText_li;
171 li.style.width=w;
172 li.style.height=h;
173 li.style.lineHeight=h+"px";
174 li.appendChild(links);
175 ul.appendChild(li);
176 createNode(li,nodes.childNodes,nodeLevel+1);
177 }
178 else//子节点的遍历开始，并创建导航的德弹出节点
179 {
180 var nlen=nodes.length;
181 for(var i=0;i<nlen;i++)
182 {
183 var xmlNode=nodes[i];
184 xmlNode=cleanWhitespace(xmlNode);
185 var nodeNameValue=xmlNode.getAttribute("name")!=null?xmlNode.getAttribute("name"):xmlNode.nodeName;
186 var nodeUrlValue=xmlNode.getAttribute("href")!=null?xmlNode.getAttribute("href"):"";
187 var li=document.createElement("li");
188 var links=document.createElement("a");
189 var nodeName=document.createTextNode(nodeNameValue);
190 links.setAttribute("href",nodeUrlValue);
191 links.setAttribute("target",target);
192 links.appendChild(nodeName);
193 li.style.cssText=navCssText_li;
194 li.style.width=w;
195 li.style.height=h;
196 li.style.lineHeight=h+"px";
197 li.appendChild(links);
198 ul.appendChild(li);
199
200 li.οnmοuseοver=function()
201 {
202 this.style.backgroundColor=bgColorWhenOver;
203 }
204 li.οnmοuseοut=function()
205 {
206 this.style.backgroundColor=bgColorWhenOut;
207 }
208 parentNode.οnmοuseοver=function()
209 {
210 this.style.backgroundColor=bgColorWhenOver;
211 this.hasChildNodes&&this.childNodes.length>1?this.childNodes[1].style.visibility="visible":false;//当每个导航存在下级导航时那么显示它的子导航
212 }
213 function nodeWhenOut(evt)
214 {
215 try
216 {
217 evt==null?evt=window.event:evt;//因为IE和FF的EVENT获取不一样，所以需要判断
218 if (evt.currentTarget&&evt.relatedTarget != this&&this != evt.relatedTarget.parentNode)
219 {
220 this.hasChildNodes&&this.childNodes.length>1?this.childNodes[1].style.visibility="hidden":false;
221 }
222 else if(this.contains(event.toElement ) == false)
223 {
224 this.hasChildNodes&&this.childNodes.length>1?this.childNodes[1].style.visibility="hidden":false;
225 }
226 this.style.backgroundColor=bgColorWhenOut;
227
228 }catch(e){}/*因为EVENT在FF下或提示一个错误，虽然无关紧要但总不好看，所以catch不做任何处理*/
229 }
230 parentNode.οnmοuseοut=nodeWhenOut;
231 xmlNode.hasChildNodes&&xmlNode.childNodes.length>0?createNode(li,xmlNode.childNodes,nodeLevel+1):false; //鼠标离开，自导航隐藏
232 }
233 }
234 parentNode.appendChild(ul);//使导航添加到页面
235 }
236 }
下面是XML导航文件
样式1:xmlNav1.xml
View Code
1 <?xml version="1.0" encoding="UTF-8"?>
2 <root name="导航一" href="http://www.g.cn">
3 <node name="节点一" href="http://www.g.cn">
4 <node name="节点一一" href="http://www.g.cn"></node>
5 <node name="节点一二" href="http://www.g.cn"></node>
6 <node name="节点一三" href="http://www.g.cn"></node>
7 </node>
8
9 <node name="节点二" href="http://www.baidu.cn">
10 <node></node>
11 <node name="depravity" href="http://www.baidu.cn"></node>
12 </node>
13 </root>
样式2:xmlNav2.xml
View Code
<?xml version="1.0" encoding="UTF-8"?>
<导航二>
<我是一级节点>
<我是二级节点/>
<我是二级节点/>
<我是二级节点/>
<我是二级节点/>
</我是一级节点>
<我是一级节点/>
<我是一级节点/>
<我是一级节点/>
<我是一级节点/>
</导航二>
HTML调用：
View Code
1 <script language="javascript" src="xmlNav.js" charset="utf-8"></script>
2 <style type="text/css">
3 body{margin:0px; background-color:#000}
4 a{width:100%; height:100%;}
5 a:link{text-decoration:none; color:#000}
6 a:visited{text-decoration:none;color:#000}
7 a:hover{text-decoration:none;color:#000}
8 a:active{text-decoration:none;color:#000}
9 </style>
10 <body>
11 <table width="100%" height="100%"><tr><td><center>
12 <table border="0" style="text-align:center;" cellpadding="0" cellspacing="0">
13 <tr>
14 <td rowspan="3"><div class="navl" id="navl2" style="width:100; height:20"></div> </td>
15 <td><div class="navl" id="navl0" style="width:100; height:20"></div> </td>
16 <td rowspan="3"> <div class="navl" id="navl3" style="width:100; height:20"></div></td>
17 </tr>
18 <tr>
19 <td ><div class="navl" id="navl1" style="width:100; height:20; margin-top:10px;"></div></td>
20 </tr>
21 <tr>
22 <td ><div class="navl" id="default" style="width:100; height:20; margin-top:10px;"></div></td>
23 </tr>
24 </table>
25 </center></td></tr></table>
26 </div>
27 </body>
28 <script language="javascript">
29
30 var css_ul="cursor:pointer;width:100;height:20;font-size:12px;";
31 var css_li="background-color:#02fee9;border:1px solid #000;";
32
33
34
35 var xmlNav=new XmlNav();
36 xmlNav.el="navl1";
37 xmlNav.xmlUrl="xmlNav1.xml";
38 xmlNav.layout=xmlNav.LAYOUT_DOWN;
39 xmlNav.ulCssText=css_ul;
40 xmlNav.liCssText=css_li;
41 xmlNav.colorWhenOver="#e4f9f7";
42 xmlNav.colorWhenOut="#02fee9";
43 xmlNav.create();
44
45 var xmlNav=new XmlNav();
46 xmlNav.el="navl2";
47 xmlNav.xmlUrl="xmlNav2.xml";
48 xmlNav.layout=xmlNav.LAYOUT_LEFT;
49 xmlNav.ulCssText=css_ul;
50 xmlNav.liCssText=css_li;
51 xmlNav.colorWhenOver="#e4f9f7";
52 xmlNav.colorWhenOut="#02fee9";
53 xmlNav.create();
54
55
56
57 </script>
效果图：
欢迎转载，请标明出处谢谢
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
