レスポンシブ対応!ドロワーメニューを自作してみました。

レスポンシブ対応のドロワーメニューを自作してみました。
window幅901px以下でメニュー部分がボタンになり、クリックすると右から出てきます。

HTML
<div class="drawer-open">
<main>
<p>自作のドロワーメニューです。</p>
<p>CSSの値で、メニューの開閉位置を左右に変更できます。</p>
</main>
<nav id="sidebar">
<div id="toggle"></div>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</nav>
</div>
CSS
@media only screen and (max-width: 901px) {
	#toggle {
		background: rgba(102,102,102,.5) url('./images/btn-open.png') no-repeat 0 0;
		background-size: contain;
		width: 40px;
		height: 40px;
		display: block;
		cursor: pointer;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 600;
		box-shadow: 0 0 5px rgba(0,0,0,.3);
		&.clicked {
			background: rgba(102,102,102,.5) url('./images/btn-close.png') no-repeat 0 0;
		}
	}
	#sidebar {
		position: fixed;
		box-sizing: border-box;
		right: 0;
		top: 0;
		width: 40%;
		height: 100%;
		float: none;
		display: none;
		padding: 10px 2% 15px;
		z-index: 500;
		background-color: rgba(255,255,255,.8);
		overflow-y: scroll;
	}
	.overlay {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
	}
}
js
function sideMenu() {
  var w = $(window).innerWidth();
  var obj = $('#sidebar');

  if(w <= 901) {
    obj.hide();
    obj.css('margin-top', 0);
    obj.removeClass('pc');
    obj.addClass('sp');
    $('#toggle').unbind('click');
    $('#toggle').on('click', function() {
      $('.sp').stop().animate({ width: 'toggle' });
    });
  } else {
    obj.show();
    obj.removeClass('sp');
    obj.addClass('pc');
  }

  $('#toggle').click(function(){
    $(this).toggleClass('clicked');
    $('.drawer-open').toggleClass('overlay');
  });

}//sideMenu

$(function(){
  sideMenu();

  var timer = false;
  $(window).on('resize', function() {
    if(timer !== false){
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      sideMenu();
    }, 200);
  });

});

画面をリサイズ(resize)した時にタイマー付きで呼び出して何回も処理が発生するのを防いでいます。
window幅が901px以下になったときにul#sidebarに.spクラスを付与しデザインを切り替えられるようにしています。

また、#toggleをクリックした際の処理は以下の2つです。

  • div#toggleに.clickedクラスを付与し、ボタン画像を切り替えています。
  • div.drawer-openには.overlayクラスを付与し、メニュー以外の背景部分を暗くさせ可読性がよくなるようにしています。

時間があればボタン画像をCSSのみで作成したいのですが、
とりいそぎ画像にて対応しています。

以下を参照させていただきました。ありがとうございます!

レスポンシブ対応のドロワーメニュー(サイドバー追従)を作ったよ〜

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です