<button id="button" class="hamburger">
    <span class="burger"></span>
    <span class="burger"></span>
    <span class="burger"></span>
</button>

<div class="content">
  <div class="flex">
    <nav>
      <ul id="links" class="navigation">
        <li><a href="#0">Home</a></li>
        <li><a href="#0">Our Team</a></li>
        <li><a href="#0">Work</a></li>
        <li><a href="#0">Services</a></li>
        <li><a href="#0">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
$burgerheight:5px;
$burger:#FFF;
$red:#FF5757;
$open:'Open Sans', sans-serif;

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body{
    height:100%;
    width: 100%;
}

body {
  padding:0;
  margin:0;
  background-color:#1a1a1a;
  font-family:$open;
  -webkit-font-smoothing: antialiased;
  background-image:url('http://tinyimg.io/i/DhfgDkv.jpg');
  background-repeat:no-repeat;
  background-size:cover;
}

.flex {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.content {
  width:100%;
  opacity:0;
  height:100vh;
  display:block;
  position:absolute;
  right:100%;
  transition:0.5s;
  background-color:#FAFAFA;
  .navigation {
    font-family:$open;
    list-style-type:none;
    padding-left:0px;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    li {
      padding:15px;
    }
    a {
      color:lighten(#121212,25%);
      text-decoration:none;
      position:relative;
      display:inline-block;
      overflow-x:hidden;
      transition:all 0.2s;
      &:before {
        content:'';
        overflow:hidden;
        width:100%;
        position:absolute;
        left:-150%;
        bottom:0px;
        height:3px;
        background-color:$red;
        transition:all 0.3s;
      }
      &:hover {
        color:$red;
        &:before {
          left:0px;
        }
      }
    }
  }
}

.show {
  right:0px;
  opacity:1;
}

.hamburger {
  background-color:transparent;
  border:0px;
  outline:0px;
  width:50px;
  height:50px;
  height:auto;
  position:absolute;
  top:15px;
  right:15px;
  cursor:pointer;
  z-index:9999;
  .burger {
    transition:all 0.3s;
    border-radius:5px;
    height:$burgerheight;
    width:100%;
    display:inline-block;
    background-color:#FFF;
  }
}

  .focus {
    .burger {
      transition:all 0.3s;
      &:first-of-type {
        background-color:$red;
        transition-delay:0.4s;
        transform: translate3d(0px, 0px, 0px) rotateZ(45deg);
        width:40px;
        transform-origin:left top;
      }
      &:nth-of-type(2) {
        opacity:0;
      }
      &:last-of-type {
        background-color:$red;
        transition-delay:0.4s;
        transform: translate3d(0px, 0px, 0px) rotateZ(-45deg);
        width:40px;
        transform-origin:left bottom;
      }
    }
  }

$("button,nav").click(function() {
  $(".hamburger").toggleClass("focus");
  $(".content").toggleClass("show");
});