JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <a href="#" class="menu-trigger" data-list="#menu">Menu</a>
  <a href="#" class="menu-trigger" data-list="#contacts">Contacts</a>
  <a href="#" class="menu-trigger" data-list="#cities">Cities</a>
  <ul id="menu" class="list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Products</a></li>
  </ul>
  <ul id="contacts" class="list">
    <li><a href="">88003338888</a></li>
    <li><a href="">88003338888</a></li>
  </ul>
  <ul id="cities" class="list">
    <li><a href="">London</a></li>
    <li><a href="">Paris</a></li>
    <li><a href="">Berlin</a></li>
  </ul>
</nav>

CSS

body {
  background-color: #F8ECC2;
  font-family: Arial, sans-serif;
  margin: 0;
}

nav {
  width: 100%;
  background-color: #65A8A6;
}

.list {
  padding-left: 0;
}

.list,
.list li {
  display: inline-block;
}

nav a {
  color: #F8ECC2;
  display: block;
  text-decoration: none;
  padding: 20px 30px;
 }

nav a:hover {
  background: #E65540;
}

.menu-trigger {
  display: none;
  color: #F8ECC2;
}

@media screen and (max-width:500px) {
  .menu-trigger {
    display: block;
  }
  .list {
    display: none;
  }
  .list li {
    display:block;
    border-top: 1px #79896D solid; 
  }
}

JavaScript

$('.menu-trigger').click(function() {
  var list = this.dataset.list;

  $(this).parent().find('.list').not(list).slideUp(0);
  $(list).slideToggle(500);
});

$(window).resize(function() {
  if ($(window).width() > 500) {
    $('.list').removeAttr('style');
  }
});