当单击箭头时,会左边收缩,再次单击会重新展开,有图有真相:
插件代码如下:
(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);
$.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;
}
#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;
}