<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Drop Menu</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
  <p class="commander">Click the Button!</p>
  <div class="wrapper">
    <div class="menu">
      <ul class="menu__list">
        <li class="menu__list__item"><a href="#">Home</a></li>
        <li class="menu__list__item"><a href="#">Portfolio</a></li>
        <li class="menu__list__item"><a href="#">About</a></li>
      </ul>
    </div>
    <div class="button">
      <span class="button__line"></span>
      <span class="button__line"></span>
      <span class="button__line"></span>
    </div>
  
  </div>
</body>
</html>
// vars and keyframes
$delay: .5s;
$menu-items: 3;

@keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 165px;
    animation-timing-function: ease-in;
  }
  to {
    top: 150px;
    animation-timing-function: ease-out;
  }
}

// Dat CSS
html {
  width: 100% ;
  height: 100% ;
  background: radial-gradient(center, #FFF 0%, #CCC 70%, #CCC 100%) no-repeat;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.commander {
  width: 100%;
  color: #2E3F47;
  font-size: 1.5em;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 10px auto;
}

.button {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2E3F47;
  z-index: 2;
}

.button__line {
  background: #ccc;
  width: 90px;
  height: 15px;
  
  &:not(:first-child) {
    margin-top: 15px;
  }
}

.menu {
  width: 100%;
}

.menu__list {
  text-align: center;
  width: 100%;
  padding-left: 0;
}

.menu__list__item {
  position: relative;
  list-style: none;
  padding-bottom: 15px;
  top: 0px;
}

.menu__list__item a {
  text-decoration: none;
  color: grey;
  text-align: center;
  font-size: 1.5em;
  font-family: 'Open Sans', sans-serif;
}

.menu__list__item {
  opacity: 0;
}

.menu__list--animate .menu__list__item {
  animation: drop 0.9s;
  animation-fill-mode: forwards;
  opacity: 1;
  
  @for $i from 2 through $menu-items {
    &:nth-child(#{$i}) {
      animation-delay: $delay * ($i - 1);
    }
  }
}
// function to trigger animation
document.querySelector('.button').addEventListener('click', () => {
  document.querySelector('.menu__list')
    .classList.toggle('menu__list--animate');
});
  

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