JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<header class="fixed-top bg-dark">
  <h1>
    <a class="navbar-brand" href="/">
      <img class="corp_logo" src="<?php echo $template_uri ?>/assets/images/logo_header.png" alt="名神通商 株式会社">
    </a>
  </h1>
  <nav>
    <ul id="navBar" class="">
      <li class="navitem">
        <a class="navlink" href="#">HOME</a>
      </li>
      <li class="navitem">
        <a class="navlink" href="#">事業案内</a>
      </li>
      <li class="navitem">
        <a class="navlink" href="#">会社案内</a>
      </li>
      <li class="navitem">
        <a class="navlink" href="#">採用情報</a>
      </li>
      <li class="navitem no-divline">
        <a class="navlink" href="#">お知らせ</a>
      </li>
      <li>
        <a class="btn btn-outline-light" href="#">お問い合わせ</a>
      </li>
    </ul>
  </nav>
  <div id="navBarButton">
    <div class="navbar-button">
      <span class="navbar-line navbar-line-1" id="navBarLine1"></span>
      <span class="navbar-line navbar-line-2" id="navBarLine2"></span>
      <span class="navbar-line navbar-line-3" id="navBarLine3"></span>
    </div>
  </div>
</header>

CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #fff;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

header {
  width: 100%;
  position: relative;
}

header ul {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: -100%;
  background: rgba(0, 0, 0, 0.65);
  -webkit-transition: .5s;
  transition: .5s;
}

header ul li {
  height: calc(100vh/5);
  font-size: 3rem;
  text-align: center;
}

#navBarButton {
  width: 40px;
  height: 30px;
  position: absolute;
  top: 25px;
  left: 80%;
  cursor: pointer;
  display: block;
  -webkit-transition: .5s;
  transition: .5s;
}

.navbar-button {
  width: 40px;
  height: 30px;
  position: relative;
}

.navbar-line {
  display: block;
  width: 40px;
  height: 5px;
  background: rgba(0, 0, 0, 0.95);
  -webkit-transition: .5s;
  transition: .5s;
  border-radius: 50px;
  position: absolute;
}

.navbar-line-1 {
  top: 0;
}

.navbar-line-2 {
  top: 13px;
}

.navbar-line-3 {
  top: 26px;
}

.is-act {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.line-upper, .line-middle, .line-bottom {
  background: #fff;
}

.line-upper {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  top: 13px;
}

.line-middle {
  opacity: 0;
}

.line-bottom {
  -webkit-transform: rotete(-225deg);
  transform: rotate(-225deg);
  top: 13px;
}

JavaScript

function hamburger() {
	document.getElementById('navBarLine1').classList.toggle('line-upper');
	document.getElementById('navBarLine2').classList.toggle('line-middle');
	document.getElementById('navBarLine3').classList.toggle('line-bottom');
  document.getElementById('navBarButton').classList.toggle('is-act');
  document.getElementById('navBar').classList.toggle('is-act');
}

document.getElementById('navBarButton').addEventListener('click', hamburger);

let navLinks = document.getElementsByClassName('navlink');

for (let i = 0; i < navLinks.length; i++) {
	navLinks[i].addEventListener('click', hamburger);
}