最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。
バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。
スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分（コンテンツ）をスクロールさせないドロワーメニューを作成してみます。
参考にさせていただいたサイトは記事最下部に記載させていただきました。
ドロワーメニューのHTMLサンプル
たとえば下記のようなHTMLでドロワーメニューを実現します。
<div id="wrap">
<header>
<h1>タイトル</h1>
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<nav id="nav-content">
<ul>
<li>メニューです</li>
<li>メニューです</li>
<li>メニューです</li>
</ul>
</nav>
</header>
<main>
<p>コンテンツです</p>
</main>
<footer>
<p>フッターです</p>
</footer>
</div>
ドロワーメニューのCSSサンプル
/*メニュー表示非表示切替用チェックボックス*/
.nav-unshown {display:none;}
/*メニューを開く用ボタン*/
#nav-open{
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
}
#nav-open:hover{
cursor: pointer;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #fff;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {bottom: -8px;}
#nav-open span:after {bottom: -16px;}
/*メニューを閉じるカバーエリア*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 9998;/*最前面のすぐ下に表示*/
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*メニューの内容*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に表示*/
width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #fff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}
#nav-input:checked ~ #nav-close {
display: block;/*メニューを閉じるカバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
メニューを開くボタン（label#nav-open）をクリック（タップ）すると、#nav-inputのチェックボックスにチェックが入り、メニューを閉じるカバー（label#nav-close）が全画面に表示され、その上にメニュー（#nav-content）が表示されます。
このままでは画面をスクロール すると#nav-closeより下のメインコンテンツ部分がスクロールしてしまうので、スクロールを止めるために下記jQueryを利用します。
メインコンテンツ部分のスクロールを止めるjQuery例
$(function(){
//menu|メニュー表示時のスクロール止め
var scrollpos;
$('#nav-open').on('click', function(){
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({'top': -scrollpos});
$('#nav-open').addClass('open');
});
$('#nav-close').on('click', function(){
$('body').removeClass('fixed').css({'top': 0});
window.scrollTo( 0 , scrollpos );
$('#nav-open').removeClass('open');
});
});
#nav-open押下時にBODYタグにfixedクラスを付与し、#nav-close押下時にBODYタグのfixedクラスを除去します。
fixedクラスは下記のようにしています。
.fixed {
position: fixed;
width: 100%;
height: 100%;
}
上記のようにすると、メニューを開いた時に画面の余白部分（コンテンツ）をスクロールさせないドロワーメニューを実現できます。
参考にさせていただいた記事
当記事の作成に下記サイトを参考にさせていただきました。
有益な情報を公開していただきありがとうございます。
