如何通过javascript制作简单的树型菜单?

MzTreeView 1.0 开发文档 
文档 
开发文档: http://www.meizz.com/Web/Article.asp?id=436
控件下载: http://www.meizz.com/Web/Download/MzTreeView10.rar
应用示例: http://www.meizz.com/Web/Demo/MzTreeView10.htm 
说明 
MzTreeView 1.0 是数据一次性加载，客户端节点异步展示的WEB脚本树。MzTreeView 1.0 的理论节点数设计上限为十万节点，在节点数三万的情况下页面打开时间小于 3 秒。无限层次无限节点的数的层级组成方式：id parentId。即每个节点除本身的节点id之外还有它的父层节点id，通过这种方式就可以组合成无限层级的树了。在 MzTreeView 里都有一个虚的根节点，其ID为0，用户可见的根节点其父节点ID皆为0MzTreeView 1.0在数据库库表里的字段名称：字段名 字段的具体说明 
id 节点ID（不可为0，可以是数字或字符） 
parentId 本节点的父节点ID（若本节点已为根节点，此处填0） 
text 节点的显示文本（一般不允许为空，不过有一种情况例外，即根节点，若根节点文本为空，这个根节点将不会在页面里显示） 
hint 节点的说明注解 
icon 节点的图标，MzTreeView 1.0允许每个节点拥有不同的图标（对应的名字在类里的icons和iconsExpand定义） 
data 节点挂的数据，格式是 param=value¶m=value&... url里?后的那串字符串格式， 
url 每个节点允许拥有不同的链接，它为空或者为#时，树里这个节点的链接，点击将无反应 
target 每个节点的链接允许在不同的target里打开，为空时取类里的默认值 
method 点击该链接时所想触发的脚本语句 
特注：每个字段值中不可有冒号： 不可以换行 引号酌情考虑应不与节点字符串的引号相冲突属性 
MzTreeView 类的一些属性：属性名 类型 属性的具体说明 
MzTreeView.nodes 集合 服务器端给树指定数据源时数据存放的对象，具体存放格式如：
MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";MzTreeView.url 地址字符串 可读写，树缺省的URL，默认值是 # 
MzTreeView.target 目标框架名 可读写，树缺省的链接target，默认值是 _self 
MzTreeView.name 字符 只读，树的实例名，同树实例化时作为参数传入(大小写敏感)：
var Tree = new MzTreeView("Tree"); 
MzTreeView.currentNode 树节点 只读，树当前得到焦点的节点对象 
MzTreeView.icons 集合 树所使用的所有图标存放 
MzTreeView.iconsExpand 集合 树里展开状态的图标存放 
MzTreeView.colors 集合 树里使用到的几个颜色存放 MzTreeView 在客户端的节点所拥有的属性：属性名 属性的具体说明 
node.id 数字文本，节点的ID 
node.parentId 数字文本，节点对应的父节点ID 
node.text 文本，节点的显示文本 
node.hint 文本，节点的注释说明 
node.icon 文本，节点对应的图标 
node.path 文本，节点在树里的绝对路径：0_1_10_34 
node.url 文本，该节点的 URL 
node.target 文本，该节点链接的目标框架名 
node.data 文本，该节点所挂载的数据 
node.method 文本，该节点的点击对应处理语句 
node.parentNode 对象，节点的父节点对象 
node.childNodes 数组，包含节点下所有子节点的数组 
node.sourceIndex 文本，服务器给予的数据里对象的 parentId_nodeId 的组合字符串 
node.hasChild 布尔值，指该节点是否有子节点 
node.isLoad 布尔值，本节点的子节点数据是否已经在客户端初始化 
node.isExpand 布尔值，节点的展开状态 方法 
MzTreeView 类的一些方法：方法名 方法的具体说明 
MzTreeView.toString() 类的默认初始运行 
MzTreeView.buildNode(id) 将该节点的所有下级子节点转换成 HTML 并在网页上体现出来 
MzTreeView.nodeToHTML(node, AtEnd) 将 node 转换成 HTML 
MzTreeView.load(id) 从数据源里加载当前节点下的所有子节点 
MzTreeView.nodeInit(sourceIndex, parentId) 节点的信息初始，从数据源到客户端完整节点的转化 
MzTreeView.focus(id) 聚集到某个节点上 
MzTreeView.expand(id[, sureExpand]) 展开节点（包含下级子节点数据的加载初始化） 
MzTreeView.setIconPath(path) 给节点图片设置正确的路径 
MzTreeView.nodeClick(id) 节点链接点击时同时被触发的点击事件处理方法 
MzTreeView.upperNode() 跳转到当前聚集节点的父级节点 
MzTreeView.lowerNode() 跳转到当前聚集节点的子级节点 
MzTreeView.pervNode() 跳转到当前聚集节点的上一节点 
MzTreeView.nextNode() 跳转到当前聚集节点的下一节点 
MzTreeView.expandAll() 展开所有的树点，在总节点量大于500时这步操作将会比较耗时 
<script language="JavaScript"
  src="http://www.meizz.com/Web/Plugs/MzTreeView10.js"></script>
<base href="http://www.meizz.com/Web/">
<style>
A.MzTreeview
{
  font-size: 9pt;
  padding-left: 3px;
}
</style>
<script language="JavaScript">
  var tree = new MzTreeView("tree");  tree.icons["property"] = "property.gif";
  tree.icons["css"] = "collection.gif";
  tree.icons["book"]  = "book.gif";
  tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片  tree.setIconPath("http://www.meizz.com/Icons/TreeView/"); //可用相对路径  tree.nodes["0_1"] = "text:WEB 编程";
  tree.nodes["1_100"] = "text:代码示例; data:id=100"; 
  tree.nodes["1_200"] = "text:梅花雪脚本控件集; data:id=200";
  tree.nodes["1_310"] = "text:CSS; icon:css; data:id=310"; 
  tree.nodes["1_320"] = "text:DHTML; data:id=320"; 
  tree.nodes["1_300"] = "text:HTML; data:id=300"; 
  tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
  tree.nodes["320_322"] = "text:属性; icon: property; data:id=322"; 
  tree.nodes["320_323"] = "text:方法; data:id=323"; 
  tree.nodes["320_324"] = "text:事件; icon:event; data:id=324"; 
  tree.nodes["320_325"] = "text:集合; data:id=325"; 
  tree.nodes["400_407"] = "text:对象; data:id=407"; 
  tree.nodes["400_406"] = "text:方法; data:id=406"; 
  tree.nodes["400_408"] = "text:运算符; data:id=408"; 
  tree.nodes["400_409"] = "text:属性; data:id=409"; 
  tree.nodes["407_1140"] = "text:Date; url:Article.asp; data:id=140";
  tree.nodes["406_1127"] = "text:toString; url:Article.asp; data:id=127";
  tree.nodes["408_1239"] = "text:||; url:Article.asp; data:id=239";
  tree.nodes["409_1163"] = "text:E;  url:Article.asp; data:id=163";  tree.setURL("Catalog.asp");
  tree.setTarget("MzMain");
  document.write(tree.toString());    //亦可用 obj.innerHTML = tree.toString();
</script>