一个左边停靠且可以展开和隐藏的菜单【Jquery插件】

 当单击箭头时，会左边收缩，再次单击会重新展开，有图有真相：

 

 插件代码如下：

(function ($) {
    $.fn.customMenu = function (options) {
        var options = $.extend(options);
        return this.each(function (options) {
            $(this).html('<div id="customMenu"></div><div id="menuForm"><div class="top"><div></div></div><div class="box"><div class="inner"></div></div><div class="bottom"><div></div>');
            $.ajax({
                url: "handler/operation.ashx?cmd=getCustomMenu",
                type: "get",
                dataType: "html",
                beforeSend: function (XMLHttpRequest) {
                    $('div#customMenu').toggle(function () {
                        //$('#overlay').css({ display: 'block' });
                        $(this).animate({ "marginLeft": "-=5px" }, "fast");
                        $('#menuForm').animate({ "marginLeft": "-=0px" }, "fast");
                        $(this).animate({ "marginLeft": "+=187px" }, "slow");
                        $('#menuForm').animate({ "marginLeft": "+=190px" }, "slow");
                    },
                    function () {
                        $('#menuForm').animate({ "marginLeft": "-=190px" }, "slow");
                        $(this).animate({ "marginLeft": "-=187px" }, "slow").animate({ "marginLeft": "+=5px" }, "fast");
                        //$('#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);

 CSS样式如下：

#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;
}