jQueryによるドロワーメニューの実装

メニューリンク等を画面外に隠しておいて、ユーザーの操作によってメインの画面をずらしつつ画面外からメニューを表示させるドロワーメニュー。

当ブログでも実装しています。スマホ等、表示領域が狭いケースでは有用ですね。

html

<div id="wrapper">
	<div id="dw-menu">	
		<!-- 画面外に隠しておくメニュー -->
	</div>
	<div id="main-wrap">
		<!-- メインのコンテンツ -->
		<header>
			<div id="head-buttons-bar">
				<div id="dw-btn">
					<!-- メニューの表示、非表示を切り替えるボタン -->
				</div>
			</div>
		</header>
	</div>
</div>

</div>

</div>

</header>

</div>

※実際に要素に与えているidやclassは省略しています。

これといって特記することはありません。隠しておくメニュー部分とメインのコンテンツを兄弟要素同士にしておきます。

css

#wrapper {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

#dw-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
}

#dw-menu.active {
  width: 80%;
  min-width: 224px;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
}

#main-wrap {
  position: relative;
  width: 100%;
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
}

#main-wrap.active {
  -moz-transform: translateX(80%);
  -webkit-transform: translateX(80%);
  -o-transform: translateX(80%);
  -ms-transform: translateX(80%);
  transform: translateX(80%);
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
}

#wrapper {

position: relative;

width: 100%;

overflow-x: hidden;

}

#dw-menu {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-moz-transform: translateX(-100%);

-webkit-transform: translateX(-100%);

-o-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

-moz-transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-o-transition: 0.3s ease;

-ms-transition: 0.3s ease;

transition: 0.3s ease;

}

#dw-menu.active {

width: 80%;

min-width: 224px;

-moz-transform: translateX(0);

-webkit-transform: translateX(0);

-o-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0);

-moz-transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-o-transition: 0.3s ease;

-ms-transition: 0.3s ease;

transition: 0.3s ease;

}

#main-wrap {

position: relative;

width: 100%;

-moz-transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-o-transition: 0.3s ease;

-ms-transition: 0.3s ease;

transition: 0.3s ease;

}

#main-wrap.active {

-moz-transform: translateX(80%);

-webkit-transform: translateX(80%);

-o-transform: translateX(80%);

-ms-transform: translateX(80%);

transform: translateX(80%);

-moz-transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-o-transition: 0.3s ease;

-ms-transition: 0.3s ease;

transition: 0.3s ease;

}

※この記事で不要なスタイルは省略しています。

css3を利用していますが、スマホの為の機能なのでレガシーブラウザは無視していいでしょう。

まず親要素にposition: relative;を指定します。初期状態の隠しておくドロワーメニューを表示させない為、またメニューを表示したとき、ずらしたメインコンテンツの画面外の部分を表示させないためにoverflow-x: hidden;を指定しておきます。

子のメニューとメインのコンテンツそれぞれにposition: absolute;を指定します。

初期の表示でメニューはtransformプロパティのtranslateXで-100%を指定して画面外に隠し、メインコンテンツのtranslateXは0としておきます。

さらにこの両要素のクラスactiveのstyleですが、これがメニューが表示されている状態のstyleです。
メニューのwidthを80%、translateXを0にし、メインコンテンツのtranslateXを80%とします。

これで画面の左から80%がメニューとなり、残りの20%がメインコンテンツになります。

表示の切り替え時のアニメーションをtransition: 0.3s ease;で指定します。この指定はなくてもいいですが、あったほうが閲覧者がメニューの表示、非表示の変化がわかりやすいでしょう。

jQuery

$(document).ready(function(){
	function switchMenu(){
		if($("#dw-menu").hasClass("active")){
			$("#dw-menu").removeClass("active");
			$("#main-wrap").removeClass("active");		
		}else{
			$("#dw-menu").addClass("active");
			$("#main-wrap").addClass("active");	
		}
	}

	$("#dw-btn").click(function(){
		switchMenu();
	});
	$("#main-wrap").click(function(){
		if($("#dw-menu").hasClass("active")){
			switchMenu();
		}
	});

	var touchStartX;
	var touchEndX;
	$("#main-wrap").on("touchstart", function(event){
		touchStartX = event.originalEvent.changedTouches[0].pageX;
	});
	$("#main-wrap").on("touchmove", function(event){
		touchEndX = event.originalEvent.changedTouches[0].pageX;
		var diff = touchStartX - touchEndX;
		if (diff > 20){
			if($("#dw-menu").hasClass("active")){
				switchMenu();
			}
    		}
	});
});

$(document).ready(function(){

function switchMenu(){

if($("#dw-menu").hasClass("active")){

$("#dw-menu").removeClass("active");

$("#main-wrap").removeClass("active");

}else{

$("#dw-menu").addClass("active");

$("#main-wrap").addClass("active");

}

$("#dw-btn").click(function(){

switchMenu();

});

$("#main-wrap").click(function(){

if($("#dw-menu").hasClass("active")){

switchMenu();

}

});

var touchStartX;

var touchEndX;

$("#main-wrap").on("touchstart", function(event){

touchStartX = event.originalEvent.changedTouches[0].pageX;

});

$("#main-wrap").on("touchmove", function(event){

touchEndX = event.originalEvent.changedTouches[0].pageX;

var diff = touchStartX - touchEndX;

if (diff > 20){

if($("#dw-menu").hasClass("active")){

switchMenu();

}

});

※説明に必要な部分のみ抜粋しています。

関数switchMenuは、メニュー要素、メインコンテンツ要素にクラスactiveを与えたり除去したりします。
ボタンをクリックしたときに、その関数を呼び出します。
また、メニューを表示から非表示にするときにメインコンテンツ自体をクリックしてもswitchMenuが呼び出されるようにもします。

最後のブロックはスマホのスワイプ操作の処理です。

ドロワーメニューを非表示にして初期状態にしたいとき、どういった操作をするでしょう。
メインコンテンツの部分を右から左にスワイプする操作を直感的にする方が多いのではないでしょうか。

その操作でドロワーメニューの動きを実装するためにここでは、メインコンテンツにタッチイベントを紐付けます。

タッチイベントのtouchstartは指をタップしたとき、touchmoveはタップした状態で指を動かしたときに発生します。
それぞれ、発生したときに座標を取得して一定数より多ければswitchMenuが呼び出される仕組みです。

プログラムは独学なため、もっとスマートな記述があるかもしれませんが、参考になれば幸いです。

2015年9月2日、一部コードを編集しました。