一个左边停靠且可以展开和隐藏的菜单【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;' οnclick='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;
}

转载于:https://www.cnblogs.com/chjw8016/archive/2011/09/29/2195572.html