animated burger menu

pure css + js

by Alexandru Gatea

HTML

<ul>
  <li>
    <div class="menu type-one">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </li>
  <li>
    <div class="menu type-two">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </li>
  <li>
    <div class="menu type-three">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </li>
</ul>

SCSS

// Variables
$menuWidth: 30px;
$menuHeight: ($menuWidth * 2) / 3;
$burgerColor: #333;
//base burger style
*{
  box-sizing: border-box;
}

ul {
  display:block;
  width: 100%;
  position:relative;
  padding: 0;
  li {
    width: $menuWidth + 20;
    height: $menuWidth + 20;
    position: relative;
    float: left;
    list-style-type: none;
    &:hover {
      background: #ccc;
    }
    .menu {
      position: absolute;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      
    }
  }
}

.menu {
  position: relative;
  width: $menuWidth;
  height: $menuHeight;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  span {
    display: block;
    background: $burgerColor;
    position: absolute;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    width: 50%;
    height: 2px;
    &:nth-child(1) {
      top: 0;
      left: 0;
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
    }
    &:nth-child(3) {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    &:nth-child(4) {
      top: 50%;
      left: 50%;
      transform: translateY(-50%);
    }
    &:nth-child(5) {
      bottom: 0;
      left: 0;
    }
    &:nth-child(6) {
      bottom: 0;
      right: 0;
    }
  }
}

//burger menu type one
.menu.type-one {
  &.open {
    height: $menuWidth;
    span {
      width: 50%;
      &:nth-child(1) {
        transform: rotate(45deg);
        transform-origin: top left;
        left:5px;
        top: 3px;
      }
      &:nth-child(2) {
        transform: rotate(-45deg);
        transform-origin: top right;
        right: 5px;
        top: 3px;

      }
      &:nth-child(3) {
        opacity: 0;
        left: -100%;
      }
      &:nth-child(4) {
        opacity: 0;
        left: 100%;
      }
      &:nth-child(5) {
        left:4px;
        bottom: 4px;
        transform: rotate(-45deg);
        transform-origin: top left;
      }
      &:nth-child(6) {
        transform: rotate(45deg);
       ...

JavaScript

$(".menu").on("click", function() {
  $(this).toggleClass("open");
});