<nav>
  <input type="checkbox" id="nav" class="hidden"/>
  <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
  <div class="nav-container">
    <ul>
      <li><a href="#">Work</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
$color = #1F2227

body
  font-family 'Helvetica Neue', sans-serif
  font-weight 400

*
  box-sizing border-box

nav
  padding 30px
  ul
    float right
    li
      display inline-block
      float left
      &:not(:first-child)
        margin-left 25px
      a
        display inline-block
        outline none
        color $color
        font-size 16px
        text-decoration none
        letter-spacing .04em
        &:hover
          color gray
          text-decoration none
        
@media screen and (max-width: 560px) 
	.nav-container 
    position fixed
    top 0
    left 0
    height 100%
    width 100%
    z-index -1
    background $color
    opacity 0
    transition all .2s ease
    ul
      position absolute
      top 50%
      transform translateY(-50%)
      width 100%
      li
        display block
        float none
        width 100%
        text-align right
        margin-bottom 10px
        &:nth-child(1) a
          transition-delay .2s
        &:nth-child(2) a
          transition-delay .3s
        &:nth-child(3) a
          transition-delay .4s
        &:nth-child(4) a
          transition-delay .5s
        &:not(:first-child)
          margin-left 0
        a
          padding 10px 25px
          opacity 0
          color white
          font-size 24px
          font-weight 600
          transform translateY(-20px)
          transition all .2s ease
          
          
   .nav-open
      position fixed
      right 10px
      top 10px
      display block
      width 48px
      height 48px
      cursor pointer
      z-index 9999
      border-radius 50%
      i
        display block
        width 20px
        height 2px
        background $color
        border-radius 2px  
        margin-left 14px
      i:nth-child(1)
        margin-top 16px
      i:nth-child(2)
        margin-top 4px
        opacity 1
      i:nth-child(3)
        margin-top 4px
        

  
#nav:checked + .nav-open
  transform rotate(45deg)
  i
    background white
    transition transform .2s ease
    &:nth-child(1)
      transform translateY(6px) rotate(180deg)
    &:nth-child(2)
      opacity 0
    &:nth-child(3)
      transform translateY(-6px) rotate(90deg)

#nav:checked ~ .nav-container
  z-index 9990
  opacity 1
  ul li
    a
      opacity 1
      transform translateY(0)
    
.hidden
  display none
View Compiled 
//No JS
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js