Morphing burger menu button to close button

by Ercan Cicek

HTML

<a id="container">
  <div></div>
  <div></div>
  <div></div>
</a>

SCSS

/* --- vars --- */
$relW: 4em; /* --- customizable in em or px --- */
$color: black; /* --- customizable in hex or string --- */
$animTime: .5s; /* --- customizable in s --- */
$relH: $relW * (7/8); /* --- do not change this size --- */

#container {
  position: absolute;
  width: $relW;
  height: $relH;
  cursor: pointer;
  overflow: hidden;
}

#container > div {
  position: absolute;
  right: 0;
  width: 100%;
  height: 25%;
  background-color: $color;
  border-radius: 15px;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}

/* --- top line --- */
#container > div:nth-child(1) {
  top: 0;
  right: 0;
  transition: transform $animTime ease, right $animTime ease;
}
#container > div:nth-child(1).animate {
  right: 5%;
  -webkit-transform: rotate(-41deg);  
  -ms-transform: rotate(-41deg);
  transform: rotate(-41deg);
}

/* --- middle line --- */
#container > div:nth-child(2) {
  top: 37.5%;
  transition: opacity ($animTime / 2) ease ($animTime / 2);
  opacity: 1;
}
#container > div:nth-child(2).animate {
  transition-delay: 0s !important;
  opacity: 0;
}

/* --- bottom line --- */
#container > div:nth-child(3) {
  top: 75%;
  right: 0;
  transition: transform $animTime ease, right $animTime ease;
}
#container > div:nth-child(3).animate {
  right: 5%;
  -webkit-transform: rotate(41deg);
  -ms-transform: rotate(41deg);
  transform: rotate(41deg);
}

JavaScript

function init() {
	$("#container").click(function() {
		$("#container > div").toggleClass("animate");
  });
}

$(init);