简洁的二级树型菜单

[erp]

第一步：写除结构代码。
程序代码
<div id="webtree">
<dl>
<dt><span>Web Standards</span></dt>
<dd>
<ul>
<li><a href="http://www.planabc.net/">怿飞</a></li>
<li><a href="http://sheneyan.com/">子乌</a></li>
<li><a href="http://andymao.com/andy">小毅</a></li>
<li><a href="http://woooh.com">Aether</a></li>
</ul>
</dd>
<dt><span>Personal</span></dt>
<dd>
<ul>
<li><a href="http://www.pjhome.net/">PuterJam</a></
li>
<li><a href="http://www.chedong.com/blog">车东</a></
li>
<li><a href="http://plod.popoever.com/">POPOEVER</
a></li>
</ul>
</dd>
<dt><span>Flash</span></dt>
<dd>
<ul>
<li><a href="http://www.kingda.org/blog/">Kingda</
a></li>
<li><a href="http://www.j2eemx.com/">J2eemx</a></
li>
<li><a href="http://www.dengjie.com/">Danger</a></
li>
<li><a href="http://blog.eshangrao.com/">Feiy</a></
li>
<li><a href="http://www.webstudio.com.cn/
blog">egoldy</a></li>
</ul>
</dd>
<dt><span>ASP</span></dt>
<dd>
<ul>
<li><a href="http://www.cnbruce.com/">Cnbruce</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei/a></li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
</ul>
</dd>
<dt><span>Other</span></dt>
<dd>
<ul>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
<li><a href="http://www.iwcn.net/">Jxdawei</a></
li>
</ul>
</dd>
</dl>
</div>
第二步：写表现层代码
<style type="text/css">
*{margin:0;padding:0;}
body{background:gray;text-align:center;}
#webtree{
width:200px;margin:0 auto;background:white;text-
align:left;font: 12px/1.6em "Microsoft YaHei","微软雅黑","宋
体",Verdana,arial,helvetica,sans-serif;padding-left:10px;
}
#webtree a:link,.webtree a:visited{
color:#336699;text-decoration:none;
}
#webtree a:hover,.webtree a:active{
color:#ff6600;text-decoration:underline;
}
#webtree dl dt{
color:gray;font-weight:bold;text-indent:
20px;background:url(plusik.gif) no-repeat 0 1px;height:22px;line-
height:22px;cursor: pointer;
}
#webtree ul{
padding-left:20px;list-style:none;
}
#webtree li{
text-indent:20px;background:url(n.gif) no-repeat 0 1px;width:
160px;overflow: hidden; text-overflow:ellipsis;
}
#webtree span{
padding:1px;
}
</style>
第三步：写行为层代码
<script type="text/javascript">
var
treeObj=document.getElementById("webtree").getElementsByTagName("dt");
for(var i=0;i<treeObj.length;i++){
treeObj[i].setAttribute('onclick','showObj(' + i + ');');
treeObj[i].id=i;
document.getElementById("webtree").getElementsByTagName("dd")
[i].style.display="none";
}
//下边的这个循环是给IE用的，上边的setAttribute不认识。还不让我在上边的循环里加。郁闷。
for(var i=0;i<treeObj.length;i++){
treeObj[i].onclick=function(){
showObj(this.id);
}
}
function showObj(objId){
var
obj=document.getElementById("webtree").getElementsByTagName("dd")
[objId];
if(obj.style.display=="none"){
obj.style.display="";

document.getElementById("webtree").getElementsByTagName("dt")
[objId].style.background="url(minus.gif) no-repeat 0 1px";
setSelectedClass(objId);
}else{
obj.style.display="none";

document.getElementById("webtree").getElementsByTagName("dt")
[objId].style.background="url(plusik.gif) no-repeat 0 1px";
}
}
function setSelectedClass(objId){
var
obj=document.getElementById("webtree").getElementsByTagName("dt");
for(var i=0;i<obj.length;i++){
var sObj=obj[i].getElementsByTagName("span")[0];
if(i==objId){
sObj.style.background="#f7f7f7";
sObj.style.border="1px solid gray";
}else{
sObj.style.background="white";
sObj.style.border="1px solid white";
}

}
}
</script>