jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の拡張 > 単純なドロップダウンメニューの実装

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

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

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

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

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

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 の拡張 > 単純なドロップダウンメニューの実装
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門