JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border top"></div>
<div class="border bottom"></div>
<div class="border left"></div>
<div class="border right"></div>

<button class="c-hamburger c-hamburger--htx">
  <span>toggle menu</span>
</button>
<nav class="nav-menu">
  <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="life.html">VIRTUELLE WELT</a></li>
    <li><a href="#drumandbass">HAUSBAU INFORMATIONEN</a></li>
    <li><a href="baupartner.html">BAUPARTNER</a></li>
    <li><a href="hersteller.html">BAUSTOFFHERSTELLER</a></li>
    <li><a href="moebel.html">EINRICHTUNG/MĂ–BEL</a></li>
    <li><a href="love.html">HILFSORGANISATION</a></li>
    <li><a href="login.html">LOGIN</a></li>
  </ul>
</nav>

CSS

/* Body border */

/* https://www.youtube.com/watch?v=HbkOzrpmhUc https://css-tricks.com/body-border/ */

body {
  padding: 0px;
}

.border {
  position: fixed;
  background: #f9f8f3;
}

.top,
.bottom {
  left: 0;
  right: 0;
  height: 50px;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.right,
.left {
  top: 0;
  bottom: 0;
  width: 50px;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

/* End of -->> Body border */

/* Nav */

.c-hamburger {
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 25px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #262626;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #262626;
  content: "";
}

.c-hamburger span::before {
  top: -7px;
}

.c-hamburger span::after {
  bottom: -7px;
}

.c-hamburger--htx {
  background-color: #f9f8f3;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;
}

/* active state, i.e. menu open...

JavaScript

(function() {

  "use strict";

  var toggles = document.querySelectorAll(".c-hamburger");

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener("click", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active"): this.classList.add("is-active");
    });
  }

})();