JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span class="icon">Меню</span>
<ul class="menu">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li>Элемент 5</li>
</ul>

CSS

.icon {
  cursor: pointer;
}
.menu {
  display: none;
  animation: showMenu 0.5s;
  list-style: none;
  background: #fff;
}
.menu-open {
  display: block;
}
@keyframes showMenu {
  0% {
    opacity: 0;
    transform: translate(0, -30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

JavaScript

$('.icon').on('click', function() {
      $('.menu').toggleClass('menu-open');
   });