JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
  <span id="menuToggle">MENU</span>
  <ul>
    <li><a href="#">Introduction</a></li>
    <li><a href="#">Compétences</a></li>
    <li><a href="#">RĂ©alisations</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

ul li{
  display: inline-block;
  position: relative;
  top: -10px;
  opacity: 0;
  transition: all .5s ease;
}

#menuToggle:hover{
  cursor: pointer;
}

.show{
  top: 0;
  opacity: 1;
}

JavaScript

(function(){

	var menuToggle = document.getElementById('menuToggle');
  var menuItems = document.querySelectorAll('ul li');
  var isAnimated = false;
  
  function showMenu(){
    if (isAnimated) return;
    isAnimated = true;
  	for(var i = 0; i < menuItems.length; i++){
    
    (function(i){

    setTimeout(function(){
        menuItems[i].classList.toggle('show');
      }, 400 * (i+1));
    })(i);
    setTimeout(function(){
      isAnimated = false;
    }, 400 * menuItems.length);
   }
   
  } 
  
  
  menuToggle.addEventListener('click', showMenu);
  
})();