JSFiddle - React, Tailwind, and code Playground

by axl163

HTML

<button id="toggleButton">toggle menu</button>
<div id="container">
  <ul>
    <li>menu item one</li>
    <li>menu item two</li>
    <li>menu item three</li>
  </ul>
</div>

CSS

#toggleButton {
  float: right;
}

#container {
  background-color: orange;
  width: 250px;
  position: absolute;
  left: -250px;
}

#container ul {
  visibility: hidden;
}

JavaScript

var $leftMenu = $('#container');
var leftVal = parseInt($leftMenu.css('left'));

$('#toggleButton').click(function() {
  animateLeft = (parseInt($leftMenu.css('left')) == 0) ? leftVal : 0;
  $leftMenu.animate({left: animateLeft + 'px'});
  $('ul', $leftMenu).css('visibility','visible').hide().fadeIn(1000);
});