<link href='https://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Kotta+One' rel='stylesheet' type='text/css'>

<div class="drop-down">
<nav role='navigation'>
  <h1> - Navigation - </h1>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>
<div class="menu">
  <a class="trigger" href="#">&equiv;</a>
  <a class="close" href="#">&times;</a>
</div>

$blue:#2980b9;
*{
 box-sizing: border-box; 

}
html,body{
   margin: 0 auto;
  padding:0;
  height: 100%;
  width: 100%;
}
ul, li{
    margin: 0 auto;
  padding:0;
  list-style: none;
}
.drop-down{
  padding: 25px;
  position: absolute;
  width: 100%;
  height: auto;
  background: $blue;
  top:-100%;
    transition: top 0.4s ease-in-out;
  text-shadow: 1px 1px 1px darken($blue, 15%);
  box-shadow: 0 0 10px 2px #000;
  li{
     height: 50px;
    line-height: 50px;
    border-bottom: 1px solid lighten($blue, 5%);
    border-top: 1px solid darken($blue, 5%);
    text-align: center;

    &:nth-child(1){
     border-top: 0; 
    }
    &:nth-child(4){
     border-bottom: 0; 
    }
    &:hover{
       background: darken($blue, 10%); 
    }
  }
  a{
      display: block;
      font-size: 18pt;
      color:#fff;
      text-decoration: none;
      font-family: 'Carrois Gothic', sans-serif;
  }
  h1{
      font-family: 'Kotta One', serif;
      font-size: 22pt;
      text-align: center;
      color: #fff;
  }
}
.down{
 top: 0;
    transition:top 0.4s ease-in-out;
}
.menu{
     box-sizing: content-box !important;  

  position: fixed;
  top: 25px;
  right: 25px;
 width: 75px;
  height: 75px;
  text-align: center;
  border: 3px solid #fff;
  background: $blue;
  z-index: 999;
  color: #fff;
  &:hover{
     background: ligthen($blue, 5%); 
  }
  a{
    display: block;
    text-decoration: none;
    font-size: 48pt;
    font-weight: bold;
    color:#fff;
    margin: 0 auto;
    
  } 
  .close{
     display: none; 
  }
  
}
.trigger{
  animation: menu-spin-back 0.4s ease-in-out;
  animation-fill-mode: forwards; 
}
.round{

animation: menu-spin 0.4s ease-in-out;
  animation-fill-mode: forwards;
}

@-webkit-keyframes menu-spin{
    50%{
      border-radius: 100%;
      
   }
  100%{
          border-radius: 100%;

   transform: rotate(180deg); 
  }
}
@-webkit-keyframes menu-spin-back{
   50%{
      border-radius: 0;
      
   }
  100%{
          border-radius: 0;
   transform: rotate(-180deg); 
  }
}
.white{
  border-color: #fff;
  color: #fff !important;
}

$('.menu a').click(function(){
 
  $('.trigger').toggle();
  $('.menu').toggleClass('round');
  $('.close').toggle();
  $('.drop-down').toggleClass('down');
  
 
});