Javascript imitation QQ interface folding menu implementation code_navigation menu

I have been studying special effects on web pages recently. I saw the folding menu in the QQ interface, so I came up with the idea to write a similar one myself. I checked online and found that there are already many similar menu effects. No matter how many there are, I will write them first. Right.

The following is the html structure:

sdfds

dsfdsfsdfsd

dsf

dsfdsfsdf

..... .............

The one with id a is the title and content of the menu you want to add.

Below It is javascript code :

Copy code The code is as follows:

sx.activex.packmenu ={
create:function(t){
var a=document.createElement("div");
var _t=t;
a.style.height="300px";
a.style.width="150px";
a.style.border="1px red solid";
a.style.overflow="hidden";
for(var i=0;i< ;t.length;i ){
var h=document.createElement("div");
var b=document.createElement("div");;
h.style.backgroundColor="blue ";
h.style.height="10%";
b.style.padding="5px";
b.style.textAlign="center";
b.style.border ="1px green solid";
h.innerHTML=t[i][0];
b.innerHTML=t[i][1];
b.style.overflow="hidden";
b.style.height="0px";
b.style.display="none";
h.onclick=function(){
if(this.nextSibling.style.display= ="none"){
this.nextSibling.style.height="1px";
this.nextSibling.style.display="block";
this.h=window.setInterval(function(t ,t1){
return function(){
if(!t1) return;
//alert(t.nextSibling.offsetHeight);
if(parseInt(t.nextSibling.style.height )<100-_t.length*parseInt(a.all[0].style.height)-3){
t.nextSibling.style.height=parseInt(t.nextSibling.style.height) 3 "% ";
t1.style.height=parseInt(t1.style.height)-3 "%";
}
else{
t.nextSibling.style.height=100-_t.length *parseInt(a.all[0].style.height) "%";;
t1.style.display="none";
t1.style.height="0px";
window. clearInterval(t.h);
}
}
}(this,(function(){
for(var ii=0;iiif (parseInt(a.all[ii].style.height)>10)
return a.all[ii];
}
})()),10);
}
else{
if(this!=this.parentNode.firstChild){
this.previousSibling.style.height="1px";
this.previousSibling.style.display="block";
}
else{
this.parentNode.lastChild.style.display="block";
this.parentNode.lastChild.style.height="1px";
}
this .h=window.setInterval(function(t,t1){
return function(){
if(!t1) return;
if(parseInt(t.nextSibling.style.height)>3 ){
if(t!=t.parentNode.firstChild)
t.previousSibling.style.height=parseInt(t.previousSibling.style.height) 3 "%";
else
t .parentNode.lastChild.style.height=parseInt(t.parentNode.lastChild.style.height) 3 "%";
t1.style.height=parseInt(t1.style.height)-3 "%";


}
else{
if(t!=t.parentNode.firstChild)
t.previousSibling.style.height=100-_t.length*parseInt(a.all [0].style.height) "%";
else
t.parentNode.lastChild.style.height=100-_t.length*parseInt(a.all[0].style.height) "% ";
t.nextSibling.style.display="none";
t.nextSibling.style.height="0px";
window.clearInterval(t.h);
}
}
}(this,(function(){
for(var ii=0;iiif(parseInt(a.all[ii].style.height )>10)
return a.all[ii];
}
})()),1);
}
}
a.appendChild(h);
a.appendChild(b);
a.all[1].style.display="block";
a.all[1].style.height=100-t.length*parseInt( a.all[0].style.height) "%";
}
return a;
}
}

The entry parameter t is what you want to pass A two-dimensional array, in the form of a title plus content as an array item:
The following is the calling code: