<プロが教えるコーディング>スマホでドロワーメニューを実装する方法 | 東京IT新聞

<プロが教えるコーディング>スマホでドロワーメニューを実装する方法

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1848案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

 fスマートフォンサイトで見かける「ドロワーメニュー」は、メニューボタンをタップするとサイドメニューが引き出し(ドロワー)のように出現するメニューです。

 JavaScriptのプラグインを用いて実装する方法もありますが、挙動が安定しなかったり、ファイルサイズが重くなってしまう場合があります。

 今回は、CSS3と最小限のJavaScriptの設定でドロワーメニューを実装する方法を紹介します。

CSSの設定

 下図のように、メニューボタンをタップすると、右側からメニューがスライドして出現する仕様とします。

 まず「.drawer」をabsoluteで右上に配置し、メニュー幅をtransformプロパティのXの値に指定します(1)。次に「.drawer.active」でXの値を「0」とし、本来の位置に戻す記述をします(2)。  さらに#contents.coverでコンテンツエリアをメニュー幅の分だけ後退させるように、transformプロパティのXの値に「-250px」を指定します(3)。  右からスライドして出現する動きは、transitionプロパティでそれぞれ「ease(開始と終了が滑らかな動き)」「.3s(0.3秒で変化する)」と指定しています(4)。

JavaScriptの設定

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

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

 今回の執筆担当者  松原 恵(まつばら・めぐみ)  コーディングファクトリー  コーディングチーム コーダー
《株式会社モノサス》

特集

コンシューマー アクセスランキング

  1. 話題の「ユーチューバー」は本当に儲かる? その実態と現実を先駆者に聞く

    話題の「ユーチューバー」は本当に儲かる? その実態と現実を先駆者に聞く

  2. <IT坊主の説話>禅語にある「竹」の深い意味、強くしなやかな企業のあり方

    <IT坊主の説話>禅語にある「竹」の深い意味、強くしなやかな企業のあり方

  3. <EC売上調査>トップはアマゾン日本、セブン&アイは対抗できるか

    <EC売上調査>トップはアマゾン日本、セブン&アイは対抗できるか

  4. 子供に超人気!5歳のユーチューバー“がっちゃん”はどうやって生まれたか

  5. 東京を冠した「.tokyo」誕生で.com以来の“ドメインバブル”起こるか

アクセスランキングをもっと見る

page top