Recently has been studying the Web page special effects, see the QQ interface of the folding menu, so out of a thought, write a similar, online check, found that there are many similar menu effects, no matter how much, first write it.
The following is an HTML structure:
<div id= "A" ><div id= "H1" >sdfds</div><div id= "B1" >dsfdsfsdfsd</div><div id= "H2" >dsf</div><div id= "B2" >dsfdsfsdf</div>.......................</div>
ID A is the title and content of the menu you want to add.
here is the JavaScript code:
Copy Code code 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;ii<a.all.length;ii++) {
if (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;ii<a.all.length;ii++) {
if (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 the two-dimensional array you want to pass, in the form of a title plus an array item:
Here is the calling code:
<title>untitled document</title>
<body>
<script src= "Kongjian.js" ></script>
<script>
var a=sx.activex.packmenu.create ([["ASD", "Sadsadas"],["SD", "Sadsaas"],["W", "WAEDQWDQ"],["E", "EFWEFW"]]);
A.contenteditable=true;
Document.body.appendChild (a);
</script>
</body>
OK, interested friends can look at the effect.
