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

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

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



facebookはこちら
twitterはこちら

facebookやTwitterライクなメニュー
■html
<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-->
■javascript
$(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 –

    ]


    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です