facebookやTwitterライクなメニューの実装

cssとjQueryを使って、facebookやTwitterのページ右上にあるサブメニューのサンプルを作ってみました。流行りのサービスには大体ついていますね。
とりあえず一度facebookやTwitterにログインし、ログイン後の画面のページ右上にある「▼」をクリックしてみて下さい。

→facebookはこちら
→twitterはこちら

<div id="header">
<h1>ヘッダー</h1>
<div id="header_menu">
<div id="btn_header_list"></div>
<div id="header_list">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li>--------------------------</li>
<li><a href="#">メニュー5</a></li>
<li><a href="#">メニュー6</a></li>
<li><a href="#">メニュー7</a></li>
<li><a href="#">メニュー8</a></li>
</ul>
</div><!--header_list-->
</div><!--header_menu-->
</div><!--header-->

$(function() {
	$("#btn_header_list").click(function(e) {
		e.stopPropagation();
		$("#header_list").show();
	});
	$(document).click(function() {
		$("#header_list").hide();
	});
});

解説

今回CSSはソースが長くなってしまったので詳しい説明は割愛します。
CSSでやっていることは、
①ID「header」のpositionをfixedにして常にページ上部へ固定。
②ID「header_menu」をfloat: right;で右端配置。
③ID「header_list」のdisplayをnoneにして初期非表示に。
大きく分けるとこの3つになります。あとは装飾やレイアウト調整です。

動作の概要ですが、ID「btn_header_list」をクリックすると非表示になっているID「header_list」を表示します。更にページ内のどこかをクリックするとID「header_list」を非表示にするというものです。

まずこちらのソースですが、clickイベントでID「btn_header_list」をクリックで、ID「header_list」を表示させます。

	$("#btn_header_list").click(function(e) {
		e.stopPropagation();
		$("#header_list").show();
	});

次にe.stopPropagation()ですが、これが今回のスクリプトのポイントです。
この一行「e.stopPropagation();」を書かない場合、いくらID「btn_header_list」をクリックしてもID「hea2er_list」の要素を表示することはできません。

	$("#btn_header_list").click(function(e) {
		e.stopPropagation();
		$("#header_list").show();
	});

表示されない原因は以下のスクリプトです。
このスクリプトは「document」をクリックしたらID「header_list」を非表示にするというものです。

	$(document).click(function() {
		$("#header_list").hide();
	});

処理の流れとしては、
①ID「btn_header_list」をクリックしてID「header_list」を表示。
②ID「btn_header_list」をクリックすると親要素の「document」もクリックしているので、ID「header_list」を非表示に。
③結果的にID「header_list」は表示されない。

↑この現象を止める為に、stopPropagation()でイベントバブリングを停止します。わかり易く言うと親要素のイベントを停止します。

stopPropagation()についての詳しい説明は以下サイトがわかり易いと思います。
アルファシス – alphasis.info –