Asp.net JavaScript sliding and shrinking multi-level menu

Let's take a look at the final effect: http://www.orfeo-Casa/index. aspx left menu

Major javascript:

<SCRIPT type = "text/JavaScript">

// <! [CDATA [
Window. onload = function (){
Rolintab ("Rolin ")
}
Function rolintab (OBJ ){
VaR list = $ (OBJ). getelementsbytagname ("Li ");
VaR state = {Show: false, hidden: false, showobj: false };

For (VAR I = 0; I <list. length; I ++ ){
VaR TMP = new rolinitem (list [I], State );
If (I = 0) TMP. pshow ();
}
}

Function rolinitem (OBJ, state ){
VaR speed = 0.0666;
VaR range = 1;
VaR interval;
VaR tarh;
VaR tar = this;
VaR head = getfirstchild (OBJ );
VaR content = getnextchild (head );
VaR isopen = false;
This. phidden = function (){
If (isopen) Hidden ();
}
This. pshow = show;

VaR baseh = content. offsetheight;
Content. style. Display = "NONE ";
VaR isopen = false;

Head. onmouseover = function (){
This. style. Background = "#000 ";
}

Head. onmouseout = mouseout;

Head. onclick = function (){
This. style. Background = "#000 ";
If (! State. Show &&! State. Hidden ){
If (! Isopen ){
Head. onmouseout = NULL;
Show ();
} Else {
Hidden ();
}

}
}

Function mouseout (){
This. style. Background = "#000"
}
Function show (){
Head. style. borderbottom = "1px solid # dadada ";
State. Show = true;
If (State. openobj & State. openobj! = TAR ){
State. openobj. phidden ();
}
Content. style. Height = "0px ";
Content. style. Display = "Block ";
Content. style. Overflow = "hidden ";
State. openobj = tar;
Tarh = baseh;

Interval = setinterval (move, 10 );
}
Function shows (){
Isopen = true;
State. Show = false;
}

Function hidden (){
State. Hidden = true;
Tarh = 0;
Interval = setinterval (move, 10 );
}

Function hiddens (){
Head. style. borderbottom = "NONE ";
Head. onmouseout = mouseout;
Head. onmouseout ();
Content. style. Display = "NONE ";
Isopen = false;
State. Hidden = false;
}

Function move (){
VaR Dist = (tarh-content. style. Height. pxtonum () * speed;
If (math. Abs (DIST) <1) Dist = DIST> 0? 1:-1;
Content. style. Height = (content. style. Height. pxtonum () + dist) + "PX ";
If (math. Abs (content. style. Height. pxtonum ()-tarh) <= range ){
Clearinterval (interval );
Content. style. Height = tarh + "PX ";
If (tarh! = 0 ){
Shows ()
} Else {
Hiddens ();
}
}
}

}
VaR $ = function ($) {return document. getelementbyid ($ )};
String. Prototype. pxtonum = function () {return number (this. Replace ("PX ",""))}
Function getfirstchild (OBJ ){
VaR result = obj. firstchild;
While (! Result. tagname ){
Result = result. nextsibling;
}
Return result;
}
Function getnextchild (OBJ ){
VaR result = obj. nextsibling;
While (! Result. tagname ){
Result = result. nextsibling;
}
Return result;
}
//]>

</SCRIPT>

Step 2: Let me introduce in detail how to dynamically generate a menu:

HTML section:

<Div id = "Left">
<Asp: literal id = "ltacategory" runat = "server"> </ASP: literal>
</Div>

Code:

Protected void page_load (Object sender, eventargs E)
{
If (! Page. ispostback)
{
This. ltacategory. Text = getcategory ();
}
}

/// <Summary>
/// Obtain the product category
/// </Summary>
/// <Returns> </returns>
Public String getcategory ()
{
Maticsoft. BLL. productclass BLL = new maticsoft. BLL. productclass ();
List <maticsoft. model. productclass> List = maticsoft. BLL. productclass. get_list ();
Stringbuilder strresult = new stringbuilder ();
Strresult. appendline ("<ul class = \" rolinlist \ "id = \" Rolin \ "> ");
If (list. Count> 0)
{
Foreach (maticsoft. model. productclass model in List)
{
Strresult. appendline ("<li> ");
Strresult. append (string. Format ("<H2 >{0} </H2>", model. productname ));
Strresult. appendline ("<Div class = \" content \ "> ");
Strresult. appendline (getchildcategory (model. Id. tostring ()));
Strresult. appendline ("</div> ");
}
}
Strresult. appendline ("</ul> ");
Return strresult. tostring ();
}
String getchildcategory (string parentid)
{
List <maticsoft. model. productclass> List = maticsoft. BLL. productclass. get_list (parentid );
Stringbuilder strresult = new stringbuilder ();
If (list. Count> 0)
{
Foreach (maticsoft. model. productclass model in List)
{
Strresult. appendline (string. Format ("<a href = \"/list. aspx? Cid = {0} & Action = bind \ "> {1} </a> <br/>", model. ID, model. productname ));
}
}
Return strresult. tostring ();
}