Javascript imitation qq interface folding menu implementation code _ navigation menu-js tutorial

Recently, I have been studying webpage special effects. I saw the folding menu on the qq interface, so I came up with an idea. I wrote a similar one myself. If you need a friend, I have been studying webpage special effects recently, when I saw the folding menu on the qq interface, I came up with an idea and wrote a similar one. I checked it online and found that there were already many similar menu effects, no matter how many, write it first.

The following is the html Structure:

Sdfds

Dsfdsfsdfsd

Dsf

Dsfdsfsdf

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

In id a, the title and content of the menu you want to add are displayed.

Below is the javascript code:

The Code is as follows:

Sx. activex. packmenu = {
Create: function (t ){
Var a = document. createElement ("p ");
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 Var h = document. createElement ("p ");
Var B = document. createElement ("p ");;
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. previussibling. style. height = "1px ";
This. previussibling. 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. previussibling. style. height = parseInt (t. previussibling. 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. previussibling. 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;
}
}

The entry parameter t is the two-dimensional array you want to pass. It takes the form of a title and content as an array item:
The following is the call code:


Untitled Document