这是用DIV+CSS+JS构成的树型菜单，采用列表,符合WEB标准，在大多数WIN浏览器下，兼容性不错，xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把<ul class="collapsed" id="submenuid2">......</ul>之间的内容加上去,"submenuid"加1,查看效果。
CSS代码
body {margin: 0px;padding: 0;font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;text-align: center;}ul{margin: 0;padding: 0;list-style: none;}#treenav {margin: 10px;text-align: left;}#treenav ul li {margin: 1px 0;padding: 0;font-size: 11px;}#treenav ul.expanded {display: block;}#treenav ul.expanded,#treenav ul.collapsed {margin: 5px 10px;}#treenav ul.collapsed {display: none;}.expanded li,.collapsed li{border-bottom: 1px dashed #CCCCCC;width: 100px;}.listhead {font-weight: bold;display: block;font-size: 12px;color: #333333;background: #F1F1F1;padding: 3px;width: 120px;margin: 1px 0;}#treenav a {text-decoration: none;color: #666666;}#treenav a:hover {color: #990000;}
JS代码
function toggleMenu(id){
element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded');
}
onload = function() {
toggleMenu('submenuid');
}
