JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resp-menu">
  <input type="checkbox" id="hamburg">
  <label for="hamburg" class="hamburg">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
   </label>
  <nav class="topmenu">
    <div class="menu-menue-container">
      <ul id="menu-menue-1" class="menu">
        <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-184"><a href="#start">Start</a></li>
        <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#kevMACCs">KEV/MACCs</a></li>
        <li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#angebot">Unser Angebot</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#ihreVorteile">Ihre Vorteile</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#warumtxs">Warum TXS</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#contact">Kontakt</a></li>
      </ul>
    </div>
  </nav>
</div>

CSS

input#hamburg {
  display: none
}

.hamburg {
  display: block;
  width: 75px;
  height: 50px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  transition: border-radius .5s;
  cursor: pointer;
}

.line {
  position: absolute;
  left: 10px;
  height: 4px;
  width: 55px;
  background: #054A99;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}

.line:nth-child(2) {
  background: #FEAA14;
}

.line:nth-child(1) {
  top: 12px;
}

.line:nth-child(2) {
  top: 24px;
}

.line:nth-child(3) {
  top: 36px;
}

.hamburg.checked .line:nth-child(1) {
  transform: translateY(12px) rotate(-45deg);
}

.hamburg.checked .line:nth-child(2) {
  opacity: 0;
}

.hamburg.checked .line:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}

.resp-menu nav.topmenu {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

#hamburg:checked+.hamburg+nav.topmenu {
  max-height: 600px;
}

JavaScript

var hamburger = document.querySelector(".hamburg");
hamburger.onclick = function() {
  this.classList.toggle("checked");
}

$('a').on('click', function(event) {
  hamburger.click();
});