<プロが教えるコーディング>スマホでドロワーメニューを実装する方法 | 東京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)を追記します。

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

特集

page top