jQuery基礎講座：するっと動くドロワーメニューの作り方（ZIP付）

jQuery基礎講座[第１０回]

どーも＠PNRAです！
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで何かとよくみるドロワーメニューです。スマートフォンというブラウザサイズの制限を見事に克服したこのドロワーメニュー。ドロワー（引き出し）のように普段はしまっておいて、必要な時に出すというものです。

実装するにあたって、様々なjQueryプラグインもあるのですが、動きだけを考えるとそんなに複雑な仕組みではないため、自身で動作を定義してあげた方が表示速度やカスタマイズするにあたって便利だろうと思い、作ってみました。

基本的にはclick()メソッドを使ったCSSの切り替えだけなので、特に難しいことはなにもありません。

それでは、具体的にみていきましょう。

実装実例

左上をタブをクリックして動作を確認してみてください。

するっと出てきているの、確認していただけましたか？

こちらからデモページもご覧いただけます。
Drawer Slide Menu DEMO

実は今回の動き、CSS3のtransformとtransitionが肝となっており、jQueryは本当にサブキャラみたいなポジションだったりします。(CSS3すごいですね)

そんな今回作成したデモ『Drawer Slide Menu』のポイントは、

・click()メソッドを使う

・CSS3のtransformに慣れよう

といった点です。

実装内容

順を追って説明をしていきたいと思います。

概要を掴む

基本的な内容としては、メニューボタンをクリックすると、隠れていたドロワーメニューのコンテンツエリアが出現し、メインコンテンツエリアを後退させる。といった作りになっています。これはつまり、
・クリックされた時点でメニューエリア・メインコンテンツエリアに任意のクラス属性を付与
・それぞれの挙動を調整する
という内容です。

クリック時にクラス属性を渡す

jQueryの指示はたった一つ。クリックされたらクラス属性を与える。もう一度クリックされたらクラス属性を外す。これだけです。

//toggleClass()でクリック時のクラスの付け外しを指示

$(function() {

$('.DSmenu').click(function () {
$(this).toggleClass('action');

$('.section').toggleClass('blur');

}); });

後述しますが、今回のデモのドロワーメニューコンテンツエリア全体に、「.DSmenu」、メインコンテンツ全体に「.section」を与えてあります。「.DSmenu」がクリックされると、「.DSmenu」には「.action」を。「.section」には「.blur」を与えるように指示をしてあります。

CSSの指示を与える-その１-

今回の作成したデモでは、「.DSmenu」で囲まれた要素のうち、ボタンエリアを残して全て「translateX()」で画面から外して表示しています。上記のjQueryの指示で与えた「.action」というクラス属性が付与されることで、「translateX()」の値が変化してドロワーメニューが出現する。という仕組みになっています。

//ドロワーメニューを出現させるスタイルシート

.DSmenu {

width:300px; 

background:#FFF; 

-webkit-transform:translateX(-300px);	

transform:translateX(-300px);	

-webkit-transition:ease .5s;

transition:ease .5s;

position:absolute; 

position:fixed; 

top:0; 

left:0;

z-index:9999;

}

.DSmenu.action {

width:300px; 

background:#FFF; 

-webkit-transform:translateX(0);
	

transform:translateX(0);	

}

.DSmenu .DSbtn {

position:absolute; top:0;
 

right:-100px; 

background:#FFC800;
 

width:100px; 

height:100px; 	

-webkit-transition:ease .5s;

transition:ease .5s;

cursor:pointer;

}

CSSの指示を与える-その２-

今回はドロワーメニューの出現と同時にメインコンテンツも変化させているので、こちらも設定していきましょう。

//メインコンテンツを後退させるスタイルシート

.section {

-webkit-transition:ease .5s;

transition:ease .5s;	

}

.section.blur {

opacity:0.25;

transform:translateX(100px);

-webkit-filter: blur(5px);

filter: blur(5px);

}

HTMLの記述例

これらの関係性を満たすHTMLを記述すると、

HTML


<body>
<!-- ドロワーメニューコンテンツ -->

<div class="DSmenu">

<ul>

<!--  -->

<li><a href="#"></a></li>

<!--  -->

</ul>

<div class="DSbtn">

<!--  -->

</div>

</div>
<section class="section">
<!--  -->
</section>

</body>