A menu that is docked on the left and can be expanded and hidden [jquery plugin]

When you click the arrow, it will shrink on the left, and click again to expand again, with a picture showing the truth:

 

The plug-in code is as follows:

(Function ($ ){
$. FN. custommenu = function (options ){
VaR Options = $. Extend (options );
Return this. Each (function (options ){
Dimensions (this).html ('<Div id = "custommenu"> </div> <Div id = "menuform"> <Div class = "TOP"> <div> </div>/ div> <Div class = "box"> <Div class = "inner"> </div> <Div class = "bottom"> <div> </Div> ');
$. Ajax ({
URL: "handler/operation. ashx? Cmd = getcustommenu ",
Type: "Get ",
Datatype: "html ",
Beforesend: function (XMLHttpRequest ){
$ ('Div # mmmmenu '). Toggle (function (){
// Outputs ('{overlay'}.css ({display: 'block '});
$ (This). animate ({"marginleft": "-= 5px"}, "fast ");
$ ('# Menuform'). animate ({"marginleft": "-= 0px"}, "fast ");
$ (This). animate ({"marginleft": "+ = 187px"}, "slow ");
$ ('# Menuform'). animate ({"marginleft": "+ = pixel"}, "slow ");
},
Function (){
$ ('# Menuform'). animate ({"marginleft": "-= pixel"}, "slow ");
$ (This ). animate ({"marginleft": "-= 187px"}, "slow "). animate ({"marginleft": "+ = 5px"}, "fast ");
// Outputs ('{overlay'}.css ({display: 'none '});
});
},
Success: function (data, textstatus ){
VaR xmldoc = loadxml (data );
VaR elements = xmldoc. getelementsbytagname ("Node ");
For (VAR I = 0; I <elements. length; I ++ ){
VaR menuname = elements [I]. getelementsbytagname ("menuname") [0]. firstchild. nodevalue;
VaR categoryid = elements [I]. getelementsbytagname ("categoryid") [0]. firstchild. nodevalue;
VaR name = elements [I]. getelementsbytagname ("name") [0]. firstchild. nodevalue;
VaR meunurl = elements [I]. getelementsbytagname ("menuurl") [0]. firstchild. nodevalue;
If ($ (". Inner> # Div _" + categoryid).html () = NULL ){
$ (". Inner "). append ("<Div id = 'div _" + categoryid + "'style = 'margin-top: 5px; '> <Div style = 'border-bottom: 1px solid green; padding-bottom: 5px; Background: URL (.. /images/arrow_orange.jpg) No-repeat scroll 0 30% transparent; padding-left: 10px; cursor: pointer; 'onclick = 'javascript: $ (\ "# ul _" + categoryid + "\"). toggle (\ "fast \"); '> "+ name +" </div> <ul id = 'ul _ "+ categoryid +"'> </ul> </div> ");
}
$ (". Inner # ul _ "+ categoryid ). append ("<li> <a href = '" + meunurl + "'target = 'mainbody'>" + menuname + "</a> </LI> ")
}
},
Complete: function (XMLHttpRequest, textstatus ){},
Error: function (){}
});
});
};
}) (Jquery );

The CSS style is as follows:

# Custommenu,
# Menuform. Bottom, # menuform. Bottom Div,
# Menuform. Box, # menuform. Box. Inner,
# Menuform. Top, # menuform. Top Div {
Background-image: URL (../images/custommenu.gif );
}
# Custommenu {
Background-position: 0-87px; color: # ffffff; cursor: pointer; Height: 58px; left: 0;
Overflow: hidden;
Position: fixed;
* Position: absolute;
Text-indent:-100000px;
Top: 91px;
Width: 14px;
Z-index: 8;
}

# Menuform {
Left: 0;
Margin-left:-200px;
Margin-top:-160px;
Overflow: hidden;
Padding-left: 10px;
Position: fixed;
* Position: absolute;
Top: 250px;
Width: 183px;
Z-index: 9;
}
# Menuform. Box {
Background-position: Right 0; Background-repeat: Repeat-y; padding-Right: 10px;
Height: 400px;
}
# Menuform. Box. Inner {
Background-color: # FFF; Background-position:-461px 0; Background-repeat: Repeat-y; padding: 0 0 0 16px; Height: 400px;
Overflow-Y: auto;
}
# Menuform ul, # menuform ul Li {
Padding: 0; margin: 0; List-style: none; font-size: 12px;
}
# Menuform ul Li {
Padding: 4px 0;
}
# Menuform ul {
Background-color: # f6fcf3; margin-bottom: 4px;
}
# Menuform ul Li {
Margin-left: 20px;
List-style-type: Circle
}
# Menuform # loading {
Background: URL (../images/ajax-loader.gif) No-Repeat;
Width: 55px;
Height: 55px;
Margin: 100px auto;
Display: none;
}
# Menuform. Bottom {
Background-position:-231px-63px; padding-Right: 10px; ZOOM: 1;
}
# Menuform. Bottom Div {
Background-position: 0-63px; Height: 24px;
}
# Menuform. Top {
Background-position:-231px 0; color: # FFF; padding-Right: 20px; font-size: 12px; font-weight: bold;
}
# Menuform. Top Div {
Background-position: 0 0; Height: 36px; padding: 14px 0 0 15px;
}