ハンバーガーメニューでクリックすると×になるタイプの作り方（メニューも一緒に）

こういうのです↓※右上にメニューがあります

HTML

<nav class="global-nav">
    <ul>
      <li><a href="index.html">トップ</a></li>
      <li><a href="works.html">会社概要</a></li>
      <li><a href="lesson.html">業務内容</a></li>
      <li><a href="about.html">お問い合わせ</a></li>
      <li><a href="contact.html">アクセス</a></li>
    </ul>
 </nav>

<div class="hamburger" id="js-hamburger">
<span class="ham-line line01"></span>
<span class="ham-line line02"></span>
<span class="ham-line line03"></span>
</div>

<div class="nav-bg" id="js-nav-bg"></div>

CSS

.global-nav {
	position: fixed;
	right: -320px;
	top: 0;
	width: 300px;
	height: 100vh;
	padding-top: 40px;
	background-color: #fff;
	transition: all .6s;
	z-index: 200;
	overflow-y: auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.hamburger {
	position: fixed;
	right: 0;
	top: 0;
	width: 46px;
	height: 46px;
	cursor: pointer;
	z-index: 300;
	background: #fff;
}
.ham-line {
	position: absolute;
	left: 11px;
	width: 20px;
	height: 2px;
	background-color: #333;
	transition: all .6s;
}
.line01 {
	top: 14px;
}
.line02 {
	top: 21px;
}
.line03 {
	top: 28px;
}
.nav-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
	cursor: pointer;
}
.nav-open .global-nav {
	right: 0;
}
.nav-open .nav-bg {
	opacity: .8;
	visibility: visible;
}
.nav-open .line01 {
	transform: rotate(45deg);
	top: 21px;
	background-color: #333;
}
.nav-open .line02 {
	width: 0;
	left: 50%;
}
.nav-open .line03 {
	transform: rotate(-45deg);
	top: 21px;
	background-color: #333;
}
.global-nav ul {
	padding-top: 60px;
}
.global-nav ul li {
	display: block;
	position: relative;
}
.global-nav ul li a {
	padding: 15px 20px;
	color: #000;
	display: block;
	text-decoration: none;
	border-bottom: 1px dashed #999;
	position: relative;
	vertical-align: middle;
}

Javascript

function toggleNav() {
  var body = document.body;
  var hamburger = document.getElementById('js-hamburger');
  var navBg = document.getElementById('js-nav-bg');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav-open');
  });
  navBg.addEventListener('click', function() {
    body.classList.remove('nav-open');
  });
}
toggleNav();

ハンバーガーメニューの３本ラインをクリックすると
１番上は45度傾き
２番目は非表示に
３番目はマイナス45度に傾くことで３本ラインから×印に変更
transform:rotateは時計回りに要素を回転させます

メニュー部分は初めにposition:fixedでマイナスの値を付けることで
ブラウザから見えないようにし、
クリックしたときに値を0にして端に現れるようにします

さらにクリックしたときにページ全体を黒で覆い
メニューが目立つようにします

そしてJavascriptでクリックしたときに
nav-openというクラス名が付くようにすることで
これらのcssを有効にします

これだけだとハンバーガーの部分をクリックしないと
閉じないことになるので、 ↓

hamburger.addEventListener('click', function() {
     body.classList.toggle('nav-open');
   });

下記の内容を付け加えることで黒い背景部分をクリックしたときにも
閉じるようにします↓

navBg.addEventListener('click', function() {
    body.classList.remove('nav-open');
  });