<!-- CSS Animated Sandwich Icon (HTML) -->

<div id="sandwich">
  <div class="sw-topper"></div>
  <div class="sw-bottom"></div>
  <div class="sw-footer"></div>
</div>

/* CSS Animated Sandwich Icon (CSS) */

body {background-color: #333;}

$w = 100px
$h = 10px

#sandwich
  width $w
  height $w
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

.sw-topper
    position: relative
    top: 0
    width $w
    height $h
    background: rgb(255, 255, 255);
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;

    /* transition-delay: 0.2s, 0s; */

.sw-bottom
    position: relative
    width $w
    height $h
    top @height * 2

    background: rgb(255, 255, 255);
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;
    transition-delay: 0.2s, 0s;

.sw-footer
    position: relative
    width $w
    height $h
    top @height * 4
    background: rgb(255, 255, 255);
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: all 0.5s;
    transition-delay: 0.1s;

#sandwich.active
  .sw-topper
    top: 15px;
    transform: rotate(140deg);
  .sw-bottom
    top: 5px;
    transform: rotate(-140deg);
  .sw-footer
    opacity: 0;
    top: 0;
    transform: rotate(180deg);

/* CSS Animated Sandwich Icon (JS) */

	$("#sandwich, .menu_item").click(function() {
  $("#sandwich").toggleClass("active");
});