STEP 8 - 複数のオプションを設定しよう
スピード、エフェクトなど、複数のオプションを設定できるように改良しています。
jQuery Code
$.fn.slideDownMwnu = function(options){
options = $.extend({
speed: "fast",
effect: "slide",
iconClass: "icon",
caretClass: "balloon-caret"
}, options);
$("li", this).each(function(){
var subMenu = $("> ul", this);
var defaultHeight = subMenu.height();
$(this).hover(function(){
if(options.effect == "fade"){
subMenu.stop().fadeTo(options.speed, 1);
}
else{
if(subMenu.css("display") == "none"){
subMenu.slideDown(options.speed, function(){
subMenu.css("overflow", "visible");
});
}
else{
subMenu.stop().animate({
"height": defaultHeight
}, options.speed, function(){
subMenu.css("overflow", "visible");
});
}
}
},
function(){
if(options.effect == "fade"){
subMenu.stop().fadeOut(options.speed);
}
else {
subMenu.stop().slideUp(options.speed);
}
});
});
$("li:has(ul) > a", this).append('<span class="' + options.iconClass + '"></span>');
$("ul", this).prepend('<li class="' + options.caretClass + '"></li>').hide();
return this;
}
$(function(){
$("#dropdown").slideDownMwnu({
speed: 100,
effect: "fade",
iconClass: "arrowicon"
});
});