<div class="toggle-button">
  <div class="wrapper">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-middle"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0;
}

.toggle-button {
  position: fixed;
  width: 44px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-22px, -20px);
  padding: 4px;
  transition: .25s;
  z-index: 15;
}

.toggle-button:hover {
  cursor: pointer;
}

.toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 80%;
  transition: .5s;
}

.toggle-button .menu-bar-top {
  border: 4px solid #555;
  border-bottom: none;
  top: 0;
}

.toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #555;
  margin-top: 7px;
  margin-bottom: 7px;
  top: 4px;
}

.toggle-button .menu-bar-bottom {
  border: 4px solid #555;
  border-top: none;
  top: 22px;
}

.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
}

.button-open .menu-bar-middle {
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
}

.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -7px);
  transition: .5s;
}

$(document).ready(function() {

  var $toggleButton = $('.toggle-button');

  // Hamburger button
  $toggleButton.on('click', function() {
    $(this).toggleClass('button-open');
  });
});