とりあえず一度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 –
]