JSFiddle - React, Tailwind, and code Playground

by lietryit

HTML

<button id='menu-trigger'>Menu</button>
<div id='menu' class='menu'>
  <a id='page-loader' href='page1.html'>Page1</a>
  <a id='page-loader' href='page2.html'>Page2</a>
  <a id='page-loader' href='page3.html'>Page3</a>
  <a id='page-loader' href='page4.html'>Page4</a>
</div>

<div id='content'>

</div>

CSS

.menu{
  transform: translateX(-150%);
  transition: 0.50s;
  opacity: 0;
  pointer-events: none;
}

.menu.active{
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

JavaScript

$('#menu-trigger').click(function(){
	$('#menu').addClass('active');
});

$(document).click(function(e){
	if (e.target.id!='menu-trigger') {
  $('#menu').removeClass('active');
  	}
});