読者です 読者をやめる 読者になる 読者になる

P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

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

workshop

jQuery基礎講座[第10回]

どーも@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の指示を与える-その1-

今回の作成したデモでは、「.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の指示を与える-その2-

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

//メインコンテンツを後退させるスタイルシート
.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>

と、このようになります。デモサイトはそこにそれに+αが加えられていますが、基本的には上記に記載された内容をベースに作成してあります。

Drawer Slide Menu DEMO

最後に

上記サンプル内容をまとめたZIPファイルを用意したので、是非オリジナルにカスタマイズして使ってみて下さい。

ダウンロードはこちらから

ちょくちょく更新していきますので、是非こちらもご覧ください。

過去9回の記事はこちら
jQuery基礎講座[第1回]:任意のid属性を使ったクリックアクション
jQuery基礎講座[第2回]:ハンバーガーナビゲーションボタンを作ろう!
jQuery基礎講座[第3回]:ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する!
jQuery基礎講座[第4回]:ハンバーガーナビゲーション実装サンプル(ZIP付)
jQuery基礎講座[第5回]:スクロール量に応じて出現するナビゲーションエリア(ZIP付)
jQuery基礎講座[第6回]:スクロール量に応じて要素(ヘッダーなど)を固定する(ZIP付)
jQuery基礎講座[第7回]:スクロールして要素が出現したらアニメーションを実行する方法(ZIP付)
jQuery基礎講座[第8回]:スクロールに応じたビジュアルの拡大・移動で、パララックスライクなお手軽錯視効果を実装する(ZIP付)
jQuery基礎講座[第9回]:タブ切り替えを用いた特定要素の表示・非表示を実装する(ZIP付)

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)