<div class="menu-trigger">Menu</div>
<div class="menu">
  <div class="menu__bg"></div>
  <nav class="menu__container">
    <ul>
      <li><a href="#">What do you want</a></li>
      <li><a href="#">Fancy pants?</a></li>
      <li><a href="#">What's on</a></li>
      <li><a href="#">The menu?</a></li>
    </ul>
  </nav>
  <div class="menu__close"></div>
</div>

.menu-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  color: #000;
  width: 42px;
  height: 42px;
  line-height: 42px;
  margin: -21px 0 0 -21px;
  cursor: pointer;
  &:before, &:after {
    content: '';
    width: 42px;
    height: 10px;
    background: #000;
    position: absolute;
    display: block;
    left: 0;
  }
  &:before { top: 0; }
  &:after { bottom: 0; }
  &--active {
    &:before {
      animation-name: burgertop;
      animation-duration: 4s;
      animation-iteration-count: 1;
    }
    &:after {
      animation-name: burgerbottom;
      animation-duration: 4s;
      animation-iteration-count: 1;
    }
    animation-name: burgertext;
    animation-duration: 4s;
    animation-iteration-count: 1;
  }
}

.menu {
  display: none;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  &__bg {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: #000;
    &--active {
      animation-name: menubg;
      animation-duration: 4s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
  }
  &__container {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 1.5;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    &--active {
      animation-name: menufg;
      animation-duration: 4s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    a {
      display: inline-block;
      transition: all 0.2s;
      color: #fff;
      text-decoration: none;
      padding: 5px 10px;
      &:hover {
        background: #fff;
        color: #000;
      }
    }
  }
  &__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000;
    cursor: pointer;
    &:after {
      content: '\2715';
    }
  }
}

@keyframes burgertext {
    0%   { color: rgba(0,0,0,1); }
    10%  { color: rgba(0,0,0,1); }
    12%  { color: rgba(0,0,0,0); }
    100% { color: rgba(0,0,0,0); }
}

@keyframes burgerbottom {
    0%   { bottom: 0;    opacity: 1; }
    5%   { bottom: -3px; opacity: 1; }
    10%  { bottom: -3px; opacity: 1; }
    12%  { bottom: 15px; opacity: 1; }
    13%  { bottom: 15px; opacity: 0; }
    100% { bottom: 15px; opacity: 0; }
}

@keyframes burgertop {
    0%   { left: 0;   top: 0;    transform: rotate(0);       width: 42px; height: 10px; border-radius: 0; }
    5%   { left: 0;   top: -3px; transform: rotate(0);       width: 42px; height: 10px; border-radius: 0; }
    10%  { left: 0;   top: -3px; transform: rotate(0);       width: 42px; height: 10px; border-radius: 0; }
    12%  { left: 0;   top: 15px; transform: rotate(0);       width: 42px; height: 10px; border-radius: 0; }
    20%  { left: 0;   top: 15px; transform: rotate(0);       width: 42px; height: 10px; border-radius: 0; }
    30%  { left: 0;   top: 0;    transform: rotate(1280deg); width: 42px; height: 42px; border-radius: 50%; }
    35%  { left: 0;   top: 0;    transform: rotate(0);       width: 42px; height: 42px; border-radius: 50%; }
    38%  { left: 4px; top: 4px;  transform: rotate(0);       width: 34px; height: 34px; border-radius: 50%; }
    100% { left: 4px; top: 4px;  transform: rotate(0);       width: 34px; height: 34px; border-radius: 50%; }
}

@keyframes menubg {
    0%   { opacity: 0; width: 32px; height: 32px; }
    38%  { opacity: 0; width: 32px; height: 32px; }
    39%  { opacity: 1; width: 32px; height: 32px; }
    100% { opacity: 1; width: 5000px; height: 5000px; }
}

@keyframes menufg {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
}
View Compiled
$(".menu-trigger").click(function(){
  $(this).addClass("menu-trigger--active");
  $('.menu').show();
  $('.menu__bg').addClass("menu__bg--active");
  $('.menu__container').addClass("menu__container--active");
});

$(".menu__close").click(function(){
  $(".menu-trigger").removeClass("menu-trigger--active");
  $('.menu').hide();
  $('.menu__bg').removeClass("menu__bg--active");
  $('.menu__container').removeClass("menu__container--active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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