Coding Methodology
スマホでドロワーメニューを実装する方法
2015 / 04 / 30
スマートフォンサイトで見かける「ドロワーメニュー」は、メニューボタンを押すとサイドメニューが引き出し（ドロワー）のように出現するメニューです。 JavaScriptのプラグインを用いて実装する方法もありますが、挙動が安定しなかったり、ファイルサイズが重くなってしまう場合があります。 今回はCSS3と最小限のJavaScriptの設定で、ドロワーメニューを実装する方法を紹介します。
CSSの設定
図1のように、メニューボタンを押すと、右側からメニューがスライドして出現する仕様とします。
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でそれぞれのクラスを削除します。
ボタン以外にも、コンテンツエリアを押した時に、メニュー画面を閉じたい場合には、適宜設定を追記します。
