JSFiddle - React, Tailwind, and code Playground

HTML

<div class="commander"><p>Click the Button!</p></div>
  <div class="wrapper">
    
    <div class="menu">
      <div class="table">
        
        <ul class="menu__list hidden">
          <li class="menu__list__item item1"><a href="#">Home</a></li>
          <li class="menu__list__item item2"><a href="#">Portfolio</a></li>
          <li class="menu__list__item item3"><a href="#">About</a></li>
        </ul>
      
      </div>
    </div>
    <div id="jj" class="button" >
       <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  
  </div>

CSS

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

.commander {
  position: relative;
  margin-left: -100px;
  left: 50%;
}

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

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

.button {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid;
  border-radius: 50%;
  background: #2E3F47;
  z-index: 10;
}

.line {
  background: #ccc;
  width: 10px;
    
  height: 3px;
    
  margin: 2px auto;
}

.line__first {
  margin-top: 15px;
}

.menu {
  z-index: 1;
  float: left;
  width: 100%;
}

/* for the list to be horizontaly centered */
.table {
  display: table;
  margin: 0 auto;
}

.menu__list {
  
  width: 100%;
  margin-left:-110px;
    margin-top:-10px;
}

/* Animation keyframes for the drop down */
@keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 85px;
    animation-timing-function: ease-in;
  }
  to {
    top: 70px;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 85px;
    -webkit-animation-timing-function: ease-in;
  }
  to {
    top: 70px;
    -webkit-animation-timing-function: ease-out;
  }
}

li {
  position: relative;
  list-style: none;
  padding-bottom: 0px;
  top: 0px;
}

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

.menu__list__item {
  opacity: 0;    
}

/*Animation classes to add to list-items that should be animated*/
.list--animation, .list--animation--delay1, .list--animation--delay2 {
  animation: drop 0.9s;
  -webkit-animation: drop 0.9s;
  animation-fill-mode: forwards;
  opacity: 1;
 ...

JavaScript

// function to trigger animation
$('.button').click(function() {
  
  // check if the menu-items are hidden behind the button
  if ($('.menu__list').hasClass('hidden')) {
    // add class to make the menu-items drop down
    $('.item1').addClass('list--animation');
    // the following items trigger the animation after a certain delay
    $('.item2').addClass('list--animation--delay1');
    $('.item3').addClass('list--animation--delay2');
    // remove the hidden class from the ul container to show that the items are not hidden anymore
    $('.menu__list').removeClass('hidden');
  }
  else {
    // remove class to make the menu-items disappear
    $('.item1').removeClass('list--animation');
    $('.item2').removeClass('list--animation--delay1');
    $('.item3').removeClass('list--animation--delay2');
    // add the hidden class to the ul container to show that the items are now hidden again 
    $('.menu__list').addClass('hidden');
  }
  
});