コーディングメソドロジー

第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秒で変化する)」と指定しています()。

CSSの設定

JavaScriptの設定

JavaScriptの設定

メニューボタン(.menuBtn)をクリックした時に、addClassで「.drawer」と「#contents」にそれぞれ.activeと.coverを付与します(A)。もしメニューが開いている場合には、removeClassでそれぞれのクラスを削除します(B)。

ボタン以外にも、コンテンツエリアを押した時に、メニュー画面を閉じたい場合には、Cを追記します。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム