console
function dada(r){
var da=[];
for(var i=1;i<8;i++){
if(r<2)
da.push({'id':i,'ming':'菜单'+r+'_'+i,'link':i,'pid':dada(r+1)});
else
da.push({'id':i,'ming':'菜单'+r+'_'+i,'link':i,'pid':r});
}
return da;
}
var ME={
ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},
html:function(da,f){
var s='<ul'+(f?' class="f"':'')+'>';
for(var i=0,l=da.length;i<l;i++){
if(typeof(da[i].pid)=='object'){
s+='<li><button type="button" class="'+(i==0&&this.ini.i?'s1':(i+1==l?'s5':'s3'))+'" onclick="ME.yc(this)"></button><span><button type="button" class="r1"></button><a href="javascript:;">'+da[i].ming+'</a></span>';
this.ini.i=false;
s+=this.html(da[i].pid,(i+1==l));
}else{
s+='<li><button type="button" class="'+(i+1==l?'e3':'e1')+'"></button><span><button type="button" class="m1"></button><a href="http://www.onmyfree.sinaapp.com" target="mainFrame">'+da[i].ming+'</a></span>';
}
s+='</li>';
}
s+='</ul>';
return s;
},
st:function(id,da){
document.getElementById(id).innerHTML=this.html(da);
},
yc:function(a){
var s=a.className.substr(1);
if(s%2){
this.ini.d=a.parentNode.children[2];
this.ini.h1=this.hei(this.ini.d);
this.ini.h3=this.ini.h1/10;
this.yc1(1);
a.className='s'+(parseInt(s)+1);
a.parentNode.children[1].children[0].className='r2';
var ol=a.parentNode.parentNode._;
if(typeof(ol)=='object'){
this.ini.d1=ol;
this.ini.h=ol.offsetHeight;
this.ini.h2=this.ini.h/10;
this.yc2(1);
ol.parentNode.children[0].className='s'+(parseInt(ol.parentNode.children[0].className.substr(1))-1);
ol.parentNode.children[1].children[0].className='r1';
}
a.parentNode.parentNode._=a.parentNode.children[2];
}else{
this.ini.d1=a.parentNode.children[2];
this.ini.h=this.ini.d1.offsetHeight;
this.ini.h2=this.ini.h/10;
this.yc2(1);
a.className='s'+(parseInt(s)-1);
a.parentNode.children[1].children[0].className='r1';
a.parentNode.parentNode._='';
}
},
yc1:function(b){
var h1=ME.ini.h1-(11/(b+1)-1)*ME.ini.h3;
with(ME.ini.d.style){
height=h1+'px';
display='block';
}
if(b<10){
setTimeout('ME.yc1('+(b+1)+')',25);
}else{
ME.ini.d.style.display='block';
ME.ini.d.style.height='';
}
},
yc2:function(b){
var h1=(11/(b+1)-1)*ME.ini.h2;
with(ME.ini.d1.style){
height=h1+'px';
}
if(b<10){
setTimeout('ME.yc2('+(b+1)+')',25);
}else{
ME.ini.d1.style.display='';
ME.ini.d1.style.height='';
}
},
hei:function(a){
var b=a.cloneNode(true);
b.style.position='absolute';
b.style.display='block';
b.style.visibility='hidden';
a.parentNode.appendChild(b);
var h=b.offsetHeight;
a.parentNode.removeChild(b);
return h;
}
}
</script>
<body onload="ME.st('menu',dada(0))">
<div class="aa" id="menu">
</div>
</body>
.aa{height:500px; width:360px; background-color:#F1F1F1; border:outset 1px #AAA; overflow-y:auto; margin:30px auto; padding:10px;}
#menu *{margin:0px; padding:0px; list-style:none; font-size:12px; line-height:14px;}
#menu a{color:#333; text-decoration:none;}
#menu a:hover{color:#008000;}
#menu li ul{background: url("http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/line_conn.gif") repeat-y scroll 0 0 transparent; padding-left:18px; display:none; overflow:hidden;}
#menu li ul.f{background:none;}
#menu li button{width:18px; height:18px; background:url("http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/zTreeStandard.gif") no-repeat; border:none; vertical-align:middle; outline:none 0px; hide-focus:expression(this.hideFocus=true); cursor:pointer;}
#menu li button::-moz-focus-inner{border:none;}
#menu li span button{width:16px; height:16px; cursor:default; vertical-align:top;}
#menu .s1{background-position:-44px 0;}
#menu .s2{background-position:-62px 0;}
#menu .s3{background-position:-44px -18px;}
#menu .s4{background-position:-62px -18px;}
#menu .s5{background-position:-44px -36px;}
#menu .s6{background-position:-62px -36px;}
#menu .e1{background-position:-26px -18px; cursor:default;}
#menu .e3{background-position:-26px -36px; cursor:default;}
#menu .r2{background-position:-80px -16px; margin-right:2px;}
#menu .r1{background-position:-80px -0; margin-right:2px;}
#menu .m1{background-position:-80px -32px; margin-right:2px;}