JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="wrapper"> <button class="ham_btn"> <span></span> <span></span> <span></span> </button> <div class="bg"></div> <nav class="nav"> <ul> <li>メニュー</li> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ul> </nav> <header class="con"> ヘッダー </header> <main class="con"> メイン </main> <footer class="con"> フッター </footer> </div> <script src="main.js"></script> </body> </html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.wrapper {
width: 100%;
height: 100%;
}
.wrapper .ham_btn {
width: 80px;
height: 50px;
position: fixed;
top: 5px;
right: 5px;
border: none;
background-color: transparent;
cursor: pointer;
transition: all 0.3s;
z-index: 3;
}
.wrapper .ham_btn span {
position: absolute;
top: calc(50% - 2px);
left: 0;
display: inline-block;
width: 100%;
height: 4px;
border: none;
background-color: black;
transition: all 0.3s;
}
.wrapper .ham_btn span:nth-child(1) {
transform: translateY(-20px);
transform-origin: center center;
}
.wrapper .ham_btn span:nth-child(2) {
transform: none;
}
.wrapper .ham_btn span:nth-child(3) {
transform: translateY(20px);
transform-origin: center center;
}
.wrapper .ham_btn.btn_open span:nth-child(1) {
transform: translateY(0) rotate(45deg);
background-color: white;
}
.wrapper .ham_btn.btn_open span:nth-child(2) {
opacity: 0;
transform: translateX(-50%);
}
.wrapper .ham_btn.btn_open span:nth-child(3) {
transform: translateY(0) rotate(-45deg);
background-color: white;
}
.wrapper .bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(56, 68, 68, 0.5);
transform: translateX(-100%);
z-index: 2;
}
.wrapper .bg.bg_open {
transform: translateX(0%);
}
.wrapper .nav {
position: fixed;
top: 0;
left: 70px;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
list-style-position: inside;
background-color: transparent;
transform: translateX(-100%);
opacity: 0;
transition: all 0.5s;
z-index: 2;
}
.wrapper .nav > ul > li {
color: white;
padding-top: 20px;
list-style: none;
}
.wrapper .nav.open {
transform: translateX(0%);
opacity: 1;
}
.wrapper .con {
z-index: 1;
}

/* 回答者が加筆 */
.wrapper .nav {
    /* transformとopacityの両方にtransitionを指定 */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.wrapper .bg {
    /* 背景にもtransitionを指定 */
    transition: .5s;
}

JavaScript

const btn = document.querySelector(".ham_btn");
const nav = document.querySelector(".nav");
const bg = document.querySelector(".bg");

btn.addEventListener("click",function() {
  nav.classList.toggle("open");
  btn.classList.toggle("btn_open");
  bg.classList.toggle("bg_open");
});