Menu

ドロップダウンメニュープラグイン

Chapter14で作成したアコーディオンプラグインをのコードを、カプセル化しています。

オプション
  • speed : アニメーションのスピード
  • effect : slide、または fade
  • iconClass : サブメニューを持つ li要素につけるアイコンのクラス
  • caretClass : サブメニューの装飾用。挿入されるli要素につけるクラス（吹き出しの三角部）

jQuery Code

(function($){
	$.fn.dropdownMenu = function(options){
		/* オプションの設定 */
		options = $.extend({
			
			/* アニメーションのスピード */
			speed: "fast",
			
			/* slide、または fade */
			effect: "slide",
			
			/* サブメニューを持つ li要素につけるアイコンのクラス */
			iconClass: "icon",
			
			/* サブメニューの装飾用。挿入されるli要素につけるクラス（吹き出しの三角部）*/
			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;
	}
})(jQuery);
			
jQuery(function($){
	$("#dropdown").dropdownMenu({
		speed: 300
	});
});

Chapter 15