Cacher is the code snippet organizer for pro developers

div.menu
  div.menu-trigger.js-menu-trigger
    button.menu-button.open(type='button')
      - for (let i = 1; i <= 3; i++)
        span.menu-button-line
    button.menu-button.close(type='button')
      - for (let i = 1; i <= 2; i++)
        span.menu-button-line

const html    = document.documentElement
const element = document.getElementsByClassName('js-menu-trigger');

element[0].addEventListener('click', function(){
  html.classList.toggle('is-menu-opened');
});

menu-button-line-size = 4px

.menu
  // fixed top right
  // z-index 100

.menu-trigger
  background #333
  overflow hidden
  size 70

.menu-button
  absolute top right bottom left
  box-sizing border-box
  cursor pointer
  display inline-block
  font-size 0
  margin auto

.menu-button-line
  absolute left
  box-sizing border-box
  display block
  size 100% menu-button-line-size
  transform none
  transform-origin 0 0
  transition all 0.5s

  &::before
    absolute top left
    background #fff
    content ''
    display block
    size 100%

.menu-button.open
  size 30 22

  .menu-button-line
    &:nth-child(1)
      top 0
      transition transform 0.2s cubic-bezier(0.77, 0, 0.355, 1) 0.6s

    &:nth-child(2)
      bottom 0
      margin auto
      top 0
      transition transform 0.2s cubic-bezier(0.77, 0, 0.355, 1) 0.7s

    &:nth-child(3)
      bottom 0
      transition transform 0.2s cubic-bezier(0.77, 0, 0.355, 1) 0.8s

  &:hover
    .menu-button-line
      &:nth-child(1)
        &::before
          animation menuButtonHoverX 0.5s cubic-bezier(0.645, 0.045, 0.175, 1) 0.1s

      &:nth-child(2)
        &::before
          animation menuButtonHoverX 0.5s cubic-bezier(0.645, 0.045, 0.175, 1) 0.2s

      &:nth-child(3)
        &::before
          animation menuButtonHoverX 0.5s cubic-bezier(0.645, 0.045, 0.175, 1) 0.3s

  .is-menu-opened &
    .menu-button-line
      transform scaleX(0)
      transform-origin 100% 0

      &:nth-child(1)
        transition transform 0.2s cubic-bezier(0.645, 0.045, 0.175, 1) 0s

      &:nth-child(2)
        transition transform 0.2s cubic-bezier(0.645, 0.045, 0.175, 1) 0.1s

      &:nth-child(3)
        transition transform 0.2s cubic-bezier(0.645, 0.045, 0.175, 1) 0.2s

.menu-button.close
  pointer-events none
  size 30
  transform rotate(45deg)

  .menu-button-line
    &:nth-child(1)
      left 0
      size 100% menu-button-line-size
      top 50%
      transform translateY(-50%) scaleX(0)
      transform-origin 100% 50%
      transition transform 0.2s cubic-bezier(0.645, 0.045, 0.175, 1) 0s

    &:nth-child(2)
      left 50%
      size menu-button-line-size 100%
      top 0
      transform translateX(-50%) scaleY(0)
      transform-origin 50% 100%
      transition transform 0.2s cubic-bezier(0.645, 0.045, 0.175, 1) 0.15s

  &:hover
    .menu-button-line
      &:nth-child(1)
        &::before
          animation menuButtonHoverX 0.5s cubic-bezier(0.645, 0.045, 0.175, 1) 0s

      &:nth-child(2)
        &::before
          animation menuButtonHoverY 0.5s cubic-bezier(0.645, 0.045, 0.175, 1) 0.15s

  .is-menu-opened &
    pointer-events auto

    .menu-button-line
      &:nth-child(1)
        transform translateY(-50%) scaleX(1)
        transform-origin 0 50%
        transition transform 0.3s cubic-bezier(0.77, 0, 0.355, 1) 0.5s

      &:nth-child(2)
        transform translateX(-50%) scaleY(1)
        transform-origin 50% 0
        transition transform 0.3s cubic-bezier(0.77, 0, 0.355, 1) 0.6s

@keyframes menuButtonHoverX
  0%
    transform none
    transform-origin 100% 0

  45%
    transform scaleX(0)
    transform-origin 100% 0

  55%
    transform scaleX(0)
    transform-origin 0 0

  100%
    transform none
    transform-origin 0

@keyframes menuButtonHoverY
  0%
    transform none
    transform-origin 0 100%

  45%
    transform scaleY(0)
    transform-origin 0 100%

  55%
    transform scaleY(0)
    transform-origin 0 0

  100%
    transform none
    transform-origin 0 0

<link href="https://codepen.io/futemma/pen/REpRLV" rel="stylesheet" />