ホーム > Programming > JavaScript Custom Program > jQueryを使ったシンプルなドロップダウンナビゲーションプラグイン : jQuery

 タグ : ,

jQueryを使ったシンプルなドロップダウンナビゲーションプラグイン : jQuery

投稿日 : 2010年7月7日 | 更新日 : 2011年10月07日 前のページへ戻る

jQueryを使ったシンプルなドロップダウンナビゲーション。

※jQueryのナビゲーション関連のプラグインは汎用性の高いナビゲーション系jQueryプラグイン : jQueryを参照。

Demo/Dowonload

Demo
Download

HTML


<head>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jSimpleDropNav.js"></script>
<script type="text/javascript">
$(function(){
	var option = { duration: 500 } // スライドの速度をミリ秒で指定
	$("#nav").simpleDropNav(option);
});
</script>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
</head>


<body>
<ul id="nav">
	<li><a href="">メニュー1</a>
		<ul class="lower">
			<li><a href="#">サブメニュー1.1</a></li>
			<li><a href="#">サブメニュー1.2</a></li>
		</ul>
	</li>
	<li><a href="#">メニュー2</a>
		<ul class="lower">
			<li>サブメニュー2.1
				<ul class="lower">
					<li><a href="#">サブメニュー2.1.1</a></li>
					<li><a href="#">サブメニュー2.1.2</a></li>
					<li><a href="#">サブメニュー2.1.3</a></li>
				</ul>
			</li>
			<li><a href="#">サブメニュー2.2</a></li>
		</ul>
	</li>
</ul>
</body>
JavaScript 
(function($){
	$.fn.extend({
		simpleDropNav : function(option){
			// スライダーの速度初期値
			var initial = { duration : 500 }
			// オブジェクトとして引数を結合処理したオブジェクトを返す
			// setting = { initial : 500, option : option }
			var setting = $.extend(initial,option);
			// ドロップダウン処理
			var dropdown = function(ul,n){
				// 階層の判断(下層の場合lower)
				var type = $(ul).attr("class");
				// li要素取得
				var arrLi = $(ul).children("li");
				// スライダー処理コールバック関数
				// ドロップダウン処理
				$.each(arrLi,function(){
					// 参照渡しにするためにオブジェクト生成
					var isSlide = { flag: false };
					function slideComplete (o) {
						o.flag = false;
					
					}
					// li要素がul要素を包含しているかを判定
					// findメソッドはマッチする要素なくても空の配列が返る
					// thisはli要素
					var ulNode = ($(this).find("ul"));
					if (ulNode.length > 0) {
						
						// thisはli要素
						if (type == "lower") {
							$(this).find("ul").css("top", 0);
							$(this).find("ul").css("left", $(this).parent().width());
						}
						$(this).hover(
							// slideToggleは処理が逆になることがあるのでslideDown,slideUpを使う
							function () {
								if (isSlide.flag == false) {
									$(this).children("ul").slideDown(setting.duration);
									isSlide.flag = true;
								}
							},
							function (){ 
								$(this).children("ul").slideUp(setting.duration, slideComplete(isSlide));
							}
						);
						if( $(this).children("ul")) {
							dropdown($(this).children("ul")); // 再帰処理
						}
					}
					
				});
			}
			// 処理開始
			dropdown(this);
			// メソッドチェーン
			return this;
		}
	});
})(jQuery);

CSS

@charset "UTF-8";
/* -------------------------------------------------------------------
コンテンツ
------------------------------------------------------------------- */
* {
	padding: 0;
	margin: 0;
}
body {
	font-size: 87.5%;
}
a {
	color: #666;
}

/* nav
---------------------------------------------------- */
ul#nav {
	margin: 10px;
}
#nav ul {
	position: absolute;
}
#nav li {
	position: relative;
	float: left;
	width: 120px;
	height: 30px;
	color: #333;
	background: #DDD;
	border-right: 1px solid #CCC;
	line-height: 30px;
	list-style: none;
	text-align: center;
}
#nav li a {
	text-align: center;
	text-decoration: none;
}
#nav ul.lower {
	display: none;
	top: 30px;
	width: 140px;
}
#nav ul.lower li {
	float: none;
	width: 140px;
	background: #CCC;
	border-bottom: 1px solid #EEE;
}

JavaScript Custom Program | 固定リンク | Comments (0)

関連記事

このページの上へ移動

コメント

コメントはまだありません。

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


トラックバックURL

http://www.findxfine.com/programming/j-custom-program/1871.html/trackback

このページの上へ