- 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を追記します。