图片自备
<html>
<head>
<title>tree menu example</title>
<style>
ul {margin-left:9pt;}
li {font-size:9pt;list-style-type:none;list-style-image:none;}
li.close {font-size:9pt;list-style-image:url(images/close.gif);}
li.open {font-size:9pt;list-style-image:url(images/open.gif);}
li.midnode {font-size:9pt;list-style-image:url(images/midnode.gif);}
li.lastnode {font-size:9pt;list-style-image:url(images/lastnode.gif);}
a {text-transform: none; text-decoration:none;color:#FFFF99}
a:visited {text-transform: none; text-decoration:none;color:#FFFF99}
a:hover {text-decoration:underline;color:#FFFFFF}
</style>
<script>
var arrMenu = new Array(
"菜单一", new Array(
"菜单一一", new Array(
"菜单一一一", "111.htm",
"菜单一一二", "112.htm",
"菜单一一三", "113.htm"
),
"菜单一二", new Array(
"菜单一二一", "121.htm",
"菜单一二二", "122.htm",
"菜单一二三", "123.htm"
)
),
"菜单二", new Array(
"菜单二一", new Array(
"菜单二一一", "211.htm",
"菜单二一二", "212.htm",
"菜单二一三", "213.htm"
),
"菜单二二", new Array(
"菜单二二一", "221.htm",
"菜单二二二", "222.htm",
"菜单二二三", "223.htm"
)
),
"菜单三", "223.htm"
);
var count=0;
function closeAll(id) {
var menus = document.all.tags("LI");
var i,j;
for (i=0;i<menus.length; i++) {
if (menus[i].id.charAt(0)=='M') {
var obj = eval("S" + menus[i].id.substring(1,menus[i].id.length));
submenus = obj.all.tags("LI");
for (j=0;j<submenus.length; j++)
if (submenus[j].id==id)
break;
if (j==submenus.length) {
var obj1 = menus[i];
obj.style.display = "none";
obj1.className = "close";
}
}
}
}
function showMenu(menu, level) {
document.write('<UL id=S' + count + ((level>1)?' style="display:none"':'') + '>');
for (var i=0; i<menu.length; i+=2) {
if (typeof(menu[i+1])=="object") {
document.write('<LI id=M' + (++count) + ' class=close><a id=A' + count + ' href="#" onfocus="this.blur()" onclick="return ON_OFF(this)">' + menu[i] + '</a></LI>');
showMenu(menu[i+1], level + 1);
}
else
document.write('<LI class=' + ((menu.length> i+2)?'midnode':'lastnode') + '><a href="' + menu[i+1] + '" onfocus="this.blur()">' + menu[i] + '</a></LI>');
}
document.write('</UL>');
}
function ON_OFF(e) {
if (e.tagName=="A") {
closeAll("M" + e.id.substring(1,e.id.length));
var obj = eval("S" + e.id.substring(1,e.id.length));
var obj1 = eval("M" + e.id.substring(1,e.id.length));
if (obj.style.display=="none") {
obj.style.display = "block";
obj1.className = "open";
}
else {
obj.style.display = "none";
obj1.className = "close";
}
}
return false;
}
</script>
</head>
<body bgcolor="#bc0021">
<script>showMenu(arrMenu, 1);</script>
</body>
</html>