Menu

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"
	});
});

Chapter 14