<div class="hamburger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

body {
  width: 99%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

h1 {
  color: red; 
  position: absolute; 
  top:50px; 
  left: 50px;
}

/* No need to use code above =) */

.hamburger-menu {
  width: 32px;
  cursor: pointer;
  line-height: 8px;
  z-index: 999;
  height: 32px;
}

.hamburger-menu span {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: #37454e;
  transition: all .5s;
}

.hamburger-menu span:nth-child(2) {
  width: 22px;
}

.hamburger-menu span:last-child {
  width: 12px;
}

.hamburger-menu.active span {
  margin-top: 15px;
  position: absolute;
  width: 32px;
}

.hamburger-menu.active span:first-child {
  transform: rotate(-135deg);
}

.hamburger-menu.active span:nth-child(2) {
  transform: rotate(135deg);
}

.hamburger-menu.active span:last-child {
  margin-top: 30px;
  width: 0px;
  display: none;
}

$(".hamburger-menu").on("click", function() {
  $(this).toggleClass("active");
  // No need to use code below =)
  $("body").append("<h1>Yayy</h1>");
  setTimeout(function(){
    $("h1").fadeOut("fast", function(){
      $(this).remove();
    });
  }, 500);
});

document.addEventListener("touchstart", function(){}, true);