这个效果应该不算什么稀奇，网上也有现成的代码，我这个也没什么特别的地方，只是因为我自己写的，也算是为学习DOM后一个练习；在IE下测试通过；
（最近又写了一个，当然不再是为了练习；请参看：javascript操作xml生成树形菜单（一）描述）
实现效果是这样的：
读取XML文档；
采用递归生成无限级的树形菜单；
能够响应鼠标事件，展开与拆叠子级菜单；
首先是生成一个XML文档，我用的是XML Spy的编辑器；
<?xml version="1.0" encoding="utf-8"?>
<menu>
<menu name="明星名人">
<menu name="华人明星" url="">
<menu name="大陆新秀" url="">
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
<menu name="周笔畅" url="http://post.baidu.com/f?kw=%D6%DC%B1%CA%B3%A9" target="_blank"/>
</menu>
<menu name="香港" url="">
<menu name="成龙" url="http://post.baidu.com/f?kw=%B3%C9%C1%FA" target="_blank"/>
</menu>
</menu>
<menu name="日韩明星" url="Admin_Dep.aspx">
<menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
<menu name="金喜善" url="http://post.baidu.com/f?kw=%BD%F0%CF%B2%C9%C6" target="_blank"/>
</menu>
<menu name="欧美明星" url="#"/>
</menu>
<menu name="娱乐">
<menu name="快乐男声" url="#" target="_blank">
<menu name="陈楚生" url="http://post.baidu.com/f?kw=%B3%C2%B3%FE%C9%FA" target="_blank"/>
<menu name="苏醒" url="http://post.baidu.com/f?kw=%CB%D5%D0%D1"/>
</menu>
</menu>
<menu name="体育">
<menu name="体育俱乐部" url="#"/>
</menu>
<menu name="军事">
<menu name="战斗机" url="#"/>
</menu>
</menu>
保存文件名为menu.xml
在HTML中，Javascript代码如下：
//建立XMLdom对象，并载入xml，xmlFilePath为xml的文本路径
function CreateXMLDoc(xmlFilePath)
{
if(window.ActiveXObject)
{
//获得操作的xml文件的对象
var msXMLdom = new ActiveXObject('Microsoft.XMLDOM');
msXMLdom.async = false;
msXMLdom.load(xmlFilePath);
return msXMLdom;
}
else
{
var oXmlHttp = new XMLHttpRequest() ;
oXmlHttp.open( "GET", xmlFilePath, false ) ;
oXmlHttp.send(null) ;
return oXmlHttp.responseXML;
}
}
//创建对象
var xmlDoc;
xmlDoc=CreateXMLDoc("menu.xml");
var rootNode=xmlDoc.lastChild;
然后写一个生成树的函数：
//返回树形结构的HTML代码，参数node为节点名,level为当前节点相对于根节点的深度值
function BuilderTree(nodeName,level)
{
//子菜单项，缩进的像素数
var indent=10;
var temp="";
level=level==null ? 0 : level;
var nodes=nodeName.childNodes;
for(var i=0;i<nodes.length;i++)
{
//当该节点没下级节点时
if(nodes[i].childNodes.length<1)
{
//当前菜单的名称
temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;''>";
temp+="<b>-</b> ";
//是否打开新窗口
var target=nodes[i].getAttribute("target")==null ? "" : "target='"+nodes[i].getAttribute("target")+"'";
temp+="<a href='"+nodes[i].getAttribute("url")+"' "+target+">"+nodes[i].getAttribute("name")+"</a>";
temp+="</div>";
continue;
}
//当前菜单的名称
temp+="<div style='margin-left:"+level*indent+"px;cursor:hand;' onclick='show(this)'>";
temp+="<b>+</b> <b>"+nodes[i].getAttribute("name")+"</b>";
temp+="</div>";
//当前菜单的下级内容
temp+="<div style='margin-left:"+indent+"px;cursor:hand;display:none'>";
temp+=BuilderTree(nodes[i],level+1);
temp+="</div>";
}
return temp;
}
在上面的代码中，用到了递归来实现遍历XML中的所有数据；
然后，为了实现鼠标事件，再写一个方法；
show函数如下：
//操作某个节点的下一节点nextSibling是否显示；
function show(obj)
{
//当前节点的下一节点
var nextNode=obj.nextSibling;
//当前节点的头部符号节点，就是菜单项前面+、-号
var subNode=obj.firstChild.firstChild;
if(nextNode.nodeType==1)
{
with(eval(nextNode))
{
if(style.display=="")
{
style.display="none";
subNode.nodeValue="+";
}else
{
style.display="";
subNode.nodeValue="-";
}
}
}
}
因为每个菜单所属的子级内容与它自身并不在一个div中，这里仅传了this就是自身，为了操作它仅随后面的一个div，用到了nextSibling方法；并用 var subNode=obj.firstChild.firstChild;找到每个菜单头部的加减号用于展开或拆叠时显示；
看完上面这些，最终是要输出的，在HTML页面的body中，写入：
<div id="TreeMenu"></div>
然后head中，写入
<script type="text/javascript" language="javascript" defer="defer">
//将处理过的XML数据，插入到页面的相应位置
var d=document.getElementById("TreeMenu");
d.innerHTML=BuilderTree(rootNode);
</script>
这样就OK了。
代码中我写了一些注释，应该不难看懂，我就不再做过多的解释了。
源文件：
http://files.cnblogs.com/2hill/TreeMenu.rar
附一个《javascript操作xml生成下拉菜单》
http://hi.baidu.com/2hill/blog/item/1c234a952fb53f0c7bf4809c.html