Coding Methodology

スマホでドロワーメニューを実装する方法

2015 / 04 / 30

スマートフォンサイトで見かける「ドロワーメニュー」は、メニューボタンを押すとサイドメニューが引き出し(ドロワー)のように出現するメニューです。 JavaScriptのプラグインを用いて実装する方法もありますが、挙動が安定しなかったり、ファイルサイズが重くなってしまう場合があります。 今回はCSS3と最小限のJavaScriptの設定で、ドロワーメニューを実装する方法を紹介します。

スマホでドロワーメニューを実装する方法

CSSの設定

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

図1 ドロワーメニューの挙動
図2 ブロックの構造

CSSコード

#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #fff;
}
#contents {
  -webkit-transition:ease .3s;
  transition:ease .3s;
}
#contents.cover {
-webkit-transform:translateX(-250px);
transform:translateX(-250px);
}
.drawer {
  position:absolute;
  top:0;
  right:0;
  width: 250px;
  height: 100%;
  -webkit-transform:translateX(250px);
  transform:translateX(250px);
  -webkit-transition:ease .3s;
  transition:ease .3s;
}
.drawer.active {
  -webkit-transform:translateX(0);
  transform:translateX(0);
}

Transformおよびtransitionプロパティは、Android 4.1以上、iOS7.1以上で先行実装されています。使用する際には、ベンダープレフィックス(-webkit-)が必要です。

コードの解説は次のとおりです。

.drawer {
  position:absolute;
  top:0;
  right:0;

~(省略)~

  -webkit-transform:translateX(250px);
  transform:translateX(250px);
}

まず「.drawer」をabsoluteで右上に配置し、メニュー幅をtransformプロパティのXの値に指定します。

.drawer.active {
  -webkit-transform:translateX(0);
  transform:translateX(0);
}

次に「.drawer.active」でXの値を「0」とし、本来の位置に戻す記述をします。

#contents.cover {
-webkit-transform:translateX(-250px);
transform:translateX(-250px);
}

さらに#contents.coverでコンテンツエリアをメニュー幅の分だけ後退させるように、transformプロパティのXの値に「-250px」を指定します。

.drawer {

  ~(省略)~

  -webkit-transition:ease .3s;
  transition:ease .3s;
}

右からスライドして出現する動きは、transitionプロパティでそれぞれ「ease(開始と終了が滑らかな動き)」「.3s(0.3秒で変化する)」と指定しています。

JavaScriptの設定

JavaScriptコード

$(function() {
  $('.menuBtn').click(function () {
  // 開いているメニューがない場合
    if( $('.drawer.active').size() == 0 ) {
      $('.drawer').addClass('active');
      $('#contents').addClass('cover');
    // 開いているメニューがある場合
    } else {
      $('.drawer').removeClass('active');
      $('#contents').removeClass('cover');
    }
    return false;
  });

  // メニューボタン以外を押す→ メニュー閉じる
  $('body > *:not(.drawer)').click(function () {
    $('.drawer').removeClass('active');
    $('#contents ').removeClass('cover');
  });
});

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

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

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細