<div>
  <input type="checkbox" class="control" id="control">
  <label for="control">enable microanimations</label>
  <a href="" class="nav-toggle">
    <span></span>
  </a>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </nav>
</div>
$checkSize: 30px;
$toggleSize: 50px;

body {
  background: #333;
  > div {
    margin: 2em;
  }
}

input.control {
  dipslay: none;
  position: absolute;
  top: -999em;
  + label {
    position: relative;
    display: block;
    padding-left: $checkSize*2.5;
    line-height: $checkSize;
    color: #ccc;
    cursor: pointer;
    &:after {
      content: '';
      display: block;
      width: $checkSize*2;
      height: $checkSize;
      background-color: #ccc;
      border-radius: $checkSize;
      position: absolute;
      top: 0;
      left: 0;
      transition: background-color 500ms ease;
    }

    
    &:before {
      content: '';
      display: block;
      width: $checkSize;
      background: white;
      height: $checkSize;
      border-radius: $checkSize;
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
      position: absolute;
      left: 0;
      top: 0;
      transition: left 500ms ease;
      z-index: 10;
    }
  }
  &:checked {
    + label {
      &:after {
        background-color: #38ef7d;
      }
      
      &:before {
        left: $checkSize;
      }
    }
  }
}

.nav-toggle {
  width: $toggleSize;
  height: $toggleSize;
  display: block;
  background: white;
  border-radius: 50%;
  position: fixed;
  top: 2em;
  right: 2em;
  z-index: 100;
  span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    width: 30px;
    height: 4px;
    &:before,
    &:after {
      content: '';
      display: block;
      width: 30px;
      height: 4px;
      background: black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &:before {
      transform: translate(-50%,-250%);

    }
    &:after {
      transform: translate(-50%, 150%);
    }
  }
  &.clicked {
    span {
      width: 0;
      &:before {
        transform: translate(-50%,-50%) rotate(45deg);
      }
      &:after {
        transform: translate(-50%,-50%) rotate(-45deg);
      }
    }
    + nav {
      transform: translate(0,0);
    }
  }
}

nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 2em;
  width: 300px;
  background: rgba(0,0,0,0.5);
  transform: translate(100%, 0);
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      a {
        font-size: 40px;
        font-weight: bold;
        line-height: 1.9em;
        color: white;
        text-decoration: none;
      }
    }
  }
}

/* MICROANIMATIONS */
input.control:checked {
  & + label {
    & + .nav-toggle {
      box-shadow: 0;
      transition: box-shadow 500ms ease, transform 500ms ease;
      &:hover {
        box-shadow: 0 0 10px rgba(0,0,0,1);
        transform: scale(0.97);
      }
      
      span {
        transition: width 500ms ease;
        &:after,
        &:before {
          transition: transform 500ms ease 200ms;
        }
      }
      & + nav {
        transition: transform 500ms ease;
        ul {
          li {
            opacity: 0;
            transform: translate(40px, 0);
            transition: transform 500ms ease, opacity 500ms ease;
            @for $i from 1 through 5 {
              &:nth-child(#{$i}) {
                transition-delay: 100ms * $i;
              }
            }
            
            
          }
        }
        
      }
      &.clicked + nav {
        transform: translate(0,0);
        ul {
          li {
            opacity: 1;
            transform: translate(0, 0);
          }
        }
      }
    }
    
  }
}
let toggle = document.querySelector('.nav-toggle');
toggle.addEventListener('click', (e) => {
  e.preventDefault();
  toggle.classList.toggle('clicked');
})

// isn't needed
let label = document.querySelector('.control + label');
label.addEventListener('click', (e) => {
  e.preventDefault();
  document.querySelector('.control').checked = !document.querySelector('.control').checked;
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.