<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);