【jQuery】超軽量で簡単に実装できるモーダルウィンドウ風メニュー。レスポンシブ対応

メニューボタンをクリック（タップ）したら非表示だったメニュー要素が画面いっぱいに広がる。。
いろんなサイトで見かけるようになりましたね。
まだまだ使えるUIなので雛形化して残して置こうと思います。本記事の内容をコピーするだけで実装できるので気になった方はぜひ使用してみてください。

デモ
HTML
CSS
jQuery
対応ブラウザ

デモ

まずは挙動イメージを確認。

See the Pen modal-menu-jquery_ptn1 by ogasawara0920 (@ogasawara0920) on CodePen.

バーガー部分にクリック（タップ）イベントが起きると、メニューコンテンツが現れるようになっていますね。
レスポンシブデザインにも対応しています。

HTML

HTMLは以下の通り。
まずjqueryを読み込んでおきましょう。※6行目部分です。jqueryのクリックイベントを利用しますのでこれがないと動作しません。

要素は3つ。
『メニューコンテンツ』…8~15行目
『メニューボタン』…16〜18行目
『コンテンツ』…19行目〜

コンテンツ要素は挙動に関係ありません。ご自由な要素を入れてご使用ください。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
			<title>【jQuery】超軽量で簡単に実装できるモーダルウィンドウ風メニュー。レスポンシブ対応</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<body>
		<div id="menu">
 			<div class="menu-inner">
  				<div id="menuCloseBtn"><span></span><span></span></div>
  				<section class="menuContent">
   					<p style="color: #fff; margin-top: 40px">ここにメニューコンテンツを入れます</p>
  				</section>
 			</div>
		</div>
		<header id="header">
 			<div id="menuBtn"><span></span><span></span><span></span></div>
		</header>
		<section class="container">hoge</section>
		<section class="container">hogehoge</section>
		<section class="container">huga</section>
		<section class="container">hugahuga</section>
	</body>
</html>

CSS

CSSは以下の通り。

body{margin: 0;padding: 0;border: 0;outline: 0;-webkit-text-size-adjust: 100%;}

/* ==================================

 menu
 
================================== */

/* header
-------------------------------- */
#header { z-index:12;  position:fixed;  top:0;  left:0;  width:100%;  transition:0.6s all ease-in-out}
#header #menuBtn{z-index:2;position:absolute;top: 50px;left: 50px;width: 50px;height: 30px;cursor:pointer;}
#header #menuBtn span{display:block;width:100%;height: 2px;background-color:#333;transition:0.2s all ease-in-out;}
#header #menuBtn span:nth-of-type(1){ position:absolute;  top:0;  left:0}
#header #menuBtn span:nth-of-type(2){ position:absolute;  top:9px;  left:0}
#header #menuBtn span:nth-of-type(3){ position:absolute;  top:18px;  left:0}
#header #menuBtn:hover span:nth-of-type(1){ top:-3px}
#header #menuBtn:hover span:nth-of-type(3){ top:21px}

#header.is-ready{ transform:translate(0,0)}

@media screen and (max-width:640px){
#header #menuBtn{top:20px; left:20px;width: 35px;height: 20px;}
#header #menuBtn span{height: 1px}
}
	
/* menu
-------------------------------- */
#menu{ display:none; z-index:13; position:fixed; top:0; left:0; width:100%;  height:100%; min-height:100%; background-color:rgba(0,0,0,0.8)}
#menu .menu-inner{width:100%;height:100%;position:absolute;left:0;text-align:center;overflow-y:auto;}
#menu .menu-inner #menuCloseBtn{ z-index:2; position:fixed; top:50px;  left:50px;  width:50px; height:30px; cursor:pointer}
#menu .menu-inner #menuCloseBtn:hover span:nth-of-type(1){ transform:rotate(45deg)}
#menu .menu-inner #menuCloseBtn:hover span:nth-of-type(2){ transform:rotate(-45deg)}
#menu .menu-inner #menuCloseBtn span{ display:block;  width:100%;  height:2px;  background-color:#fff;  transition:0.2s all ease-in-out}
#menu .menu-inner #menuCloseBtn span:nth-of-type(1){ position:absolute;  top:7px;  left:0;  transform:rotate(23deg)}
#menu .menu-inner #menuCloseBtn span:nth-of-type(2){ position:absolute;  top:7px;  left:0;  transform:rotate(-23deg)}

@media screen and (max-width:640px){
#menu .menu-inner #menuCloseBtn{top:20px; left:20px;width:35px;  height:15px;}
#menu .menu-inner #menuCloseBtn span{height:1px;}
}

/* ==================================

 contents
 
================================== */
.container{width: 100%; height: 500px; background: #00A676; color: #fff; display: flex;align-items: center;justify-content: center;}
.container:nth-of-type(2){background: #09634A}
.container:nth-of-type(3){background: #36F9C2}
.container:nth-of-type(4){background: #2C473F}

jQuery

jQueryは以下の通り。
圧縮されており見づらいですが、簡単に説明すると
クリック（タップ）イベントによって『メニューコンテンツ』やhtml要素にスタイル付与をしているだけです。
特別な動きはしていません。
コピーしてそのままscriptタグと一緒にHTMLに埋め込んでください。

var Common=function(){function r(){n=$("#menu");t=$("#menuBtn");i=$("#menuCloseBtn")}function u(){r();f();o();s()}function f(){$(window).on("resize",function(){var n=window.innerHeight>600?window.innerHeight:"600px";$mv.height(window.innerHeight)})}function e(n){if(n)$(document).off("mousewheel"),scrollFlag=!0;else{$(document).on("mousewheel",function(n){n.preventDefault()});scrollFlag=!1}}function o(){t.on("click",function(){n.fadeIn();$("html").css({overflow:"hidden"})});i.on("click",function(){n.fadeOut();$("html").css({overflow:""})})}function s(){var t=window.navigator.userAgent.toLowerCase(),n;t.indexOf("edge")!=-1&&(n='<link rel="stylesheet" href="/">',$("head link:last").after(n))}var n,t,i,h="onwheel"in document?"wheel":"onmousewheel"in document?"mousewheel":"DOMMouseScroll";return{init:u,mouseScrollEvent:e}}();$(window).load(function(){Common.init();setTimeout(function(){$(window).scrollTop(0)},1)})