JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="nav-wrapper">
  <li>
    <ul id="nav-bar" class="nav">
      <li>L1</li>
      <li>L2</li>
      <li>L3</li>
      <li>L4</li>
      <li>L5</li>
      <li>L6</li>
    </ul>    
  </li>
  <li id="menu"><li>
</ul>

CSS

.nav-wrapper {
  list-style: none;
  float: right;
}

.nav-wrapper > li {
  float: left;
  overflow: hidden;
}

.nav {
  list-style: none;
  margin-right: -115px;
  transition: 0.3s;
}

.nav-wrapper.active .nav {
  margin-right: 0;
  transition: 0.3s;
}

.nav > li {
  float: left;
  width: 18px;
  margin: 0 5px;
  border: 1px solid red;
}

#menu::after {
  display: block;
  content: "OPEN";
  width: 60px;
  height: 20px;
  cursor: pointer;
}

.nav-wrapper.active > #menu::after {
  content: "CLOS"
}

JavaScript

$('#menu').click(function(){
	$('.nav-wrapper').toggleClass('active');
});