<nav>
  <div class="navicon">
    <div></div>
  </div>
  
  <a>Home</a>
  <a>Notifications</a>
  <a>Messages</a>
  <a>Profile</a>
  <a>Settings</a>
  
</nav>

$page-background : #303f9f;
$nav-background : white;
$color : rgba(black, .87);
$transition : .75s;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);

body {
  font: 100% Roboto;
  background: $page-background;
  margin: 50px;
}

nav {
  width: 300px;
  background: $nav-background;
  color: $color;
  -webkit-clip-path: circle(24px at 30px 24px);
  clip-path: circle(24px at 32px 24px);
  transition:
    -webkit-clip-path $transition*.75,
    clip-path $transition/2;
  
  &:hover {
    transition-timing-function: ease-out;
    transition-duration: $transition;
    -webkit-clip-path: circle(390px at 225px 24px);
    clip-path: circle(390px at 150px 24px);
  }
}

a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  user-select: none;
  
  &:hover { background: #ffe082; }
  &:active { background: #ffca28; }
}


@mixin line {
  width: 20px;
  height: 2px;
  background: $color;
}

.navicon {
  padding: 23px 20px;
  cursor: pointer;
  transform-origin: 32px 24px;
  
  div {
    position: relative;
    @include line;
    
    &:before, &:after {
      display: block;
      content: "";
      @include line;
      position: absolute;
    }
    
    &:before { top: -7px; }
    &:after { top: 7px; }
  }
}