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

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

  ul.nav-list
    li.nav-list-item Home
    li.nav-list-item About
    li.nav-list-item Work
    li.nav-list-item Contact

const html    = document.documentElement;
const element = document.getElementsByClassName('js-menu-trigger');
const classes = {
  opened: 'is-menu-opened',
  locked: 'is-locked',
}

for (let i = 0; i < element.length; i++) {
  element[i].addEventListener('click', function() {
    if (html.classList.contains(classes.opened, classes.locked)) {
      html.classList.remove(classes.opened, classes.locked);
    } else {
      html.classList.add(classes.opened, classes.locked);
    }
  });
}

menu-button-line-size = 4px

.menu
  fixed top right
  z-index 1

.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

    &:nth-child(2)
      bottom 0
      margin auto
      top 0

    &:nth-child(3)
      bottom 0

  &: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

.menu-button.close
  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(1)
      transform-origin 100% 50%

    &:nth-child(2)
      left 50%
      size menu-button-line-size 100%
      top 0
      transform translateX(-50%) scaleY(1)
      transform-origin 50% 100%

  &: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

.nav
  backface-visibility hidden
  background #333
  box-sizing border-box
  fixed top right
  overflow hidden
  padding 100px 0
  size 400 100%
  transform translateX(100%)
  transition transform 0.3s ease-in-out
  z-index 99

  .is-menu-opened &
    overflow-y scroll
    transform translateX(0)

.nav-menu
  fixed top right
  z-index 1

.nav-list
  color #fff
  font-size 30px
  margin-bottom -1em
  padding 0 100px

.nav-list-item
  margin-bottom 1em

.is-menu-opened
  .nav-overlay
    overlay()
    opacity 1
    visibility visible
    z-index 98

@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" />