ホーム » jQuery の拡張 » 単純なドロップダウンメニューの実装

単純なドロップダウンメニューの実装

ここではカスタムでメニューを作ってみましょう。

様々なプラグインなどはあるのですが、単純なドロップダウンくらいなら、ul、li で作ってしまうのも良いかもしれません。

jQuery の知識、というよりは単に CSS が９割です。

単純なドロップダウンメニューの作成

jQuery を利用、といっても大したことでは利用していません。

HTMLは次のようになってます。全体を dropdown_container という ID の Div 要素にしてます。メニューの中身は dropdown というクラスの ul (順序なしリスト) です。li 項目がメニューになってます。その li は a タグと ul タグで構成されていて、 ul 部分がスライドダウンします。

<div id="dropdown_container">
	<ul class="dropdown">
		<li class='dropdown_item'>
			<a href="http://android.keicode.com/">Android</a>
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">Apple</a></li>
			</ul>
		</li>
		<li class='dropdown_item'>
			<a href="#">Nav Item</a>
			<ul>
				<li><a href="#">Sub Item1</a></li>
				<li><a href="#">Sub Item2</a></li>
			</ul>
		</li>
	</ul>
	<div style='clear:both;'></div>
</div>

css は次の通り。気をつけるところはドロップダウン部分が absolute ポジションとするところと、a をブロック表示にすることでしょうか。

#dropdown_container {
	font-size:14px;
}

#dropdown_container ul.dropdown {
	margin:0;
	padding:0;
	list-style:none;
	width:400px;
}

#dropdown_container ul.dropdown a {
	display:block;
	text-decoration: none;
	color: #000;
	margin:5px;
}

#dropdown_container li.dropdown_item {
	float:left;
	width:100px;
	cursor:pointer;
}

#dropdown_container li.dropdown_item > ul {
	position:absolute;
	list-style:none;
	margin:0;
	padding:5px;
	width:150px;
}

#dropdown_container li.dropdown_item > ul li:hover
{
	background-color: #bbb;
	color: #000;
}

JavaScript ではメニュー項目の hover の on/off での動作を定義しています。

$(function() {
	init_menu();
});

function init_menu(){

	$('ul.dropdown li.dropdown_item').hover(
		function(){ 
			$(this).find('ul').slideDown(200);
		},
		function(){
			$(this).find('ul').hide();
		}
	);

	$('#dropdown_container')
.addClass('ui-widget-content ui-corner-all');
	$('li.dropdown_item > ul')
.addClass('ui-widget-content ui-corner-all');
	$('li.dropdown_item > ul').hide();
}

それと、角を丸くしたり jQuery UI のテーマに馴染ませるように ui-widget-content ui-corner-all を追加しています。

この程度で要件を満たせるなら、プラグインを使うより自由度があっていいかもしれませんね。

ホーム » jQuery の拡張 » 単純なドロップダウンメニューの実装