- Coding Methodology
- 第77回 スマホでドロワーメニューを実装する方法
第77回 スマホでドロワーメニューを実装する方法
スマートフォンサイトで見かける「ドロワーメニュー」は、メニューボタンを押すとサイドメニューが引き出し（ドロワー）のように出現するメニューです。
JavaScriptのプラグインを用いて実装する方法もありますが、挙動が安定しなかったり、ファイルサイズが重くなってしまう場合があります。
今回はCSS3と最小限のJavaScriptの設定で、ドロワーメニューを実装する方法を紹介します。
CSSの設定
図1 ドロワーメニューの挙動
右上のメニュー
ボタンを押す。
メニューがスライド
して現れる。
図2 ブロックの構造
図1のように、メニューボタンを押すと、右側からメニューがスライドして出現する仕様とします。
まず「.drawer」をabsoluteで右上に配置し、
メニュー幅をtransformプロパティのXの値に指定します（①）。次に「.drawer.active」でXの値を「0」とし、本来の位置に戻す記述をします（②）。
さらに#contents.coverでコンテンツエリアをメニュー幅の分だけ後退させるように、transformプロパティのXの値に「-250px」を指定します（③）。
右からスライドして出現する動きは、transitionプロパティでそれぞれ「ease（開始と終了が滑らかな動き）」「.3s（0.3秒で変化する）」と指定しています（④）。
JavaScriptの設定
メニューボタン（.menuBtn）をクリックした時に、addClassで「.drawer」と「#contents」にそれぞれ.activeと.coverを付与します（A）。もしメニューが開いている場合には、removeClassでそれぞれのクラスを削除します（B）。
ボタン以外にも、コンテンツエリアを押した時に、メニュー画面を閉じたい場合には、Cを追記します。
