JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<nav>
   <button rel='menu-toggle'>
     &#9776
   </button>
</nav>


<nav class='site-menu'>
  <button rel='menu-toggle'>
    &times;
  </button>
  
  <a href='#home'>Home</a>
  <a href='#about'>About Me</a>
  <a href='#works'>My WorkS</a>
  <a href='#contact'>Contact Me</a>
</nav>

CSS

* {
  box-sizing: border-box;
  margin: 0;
}

a {
  color: inherit;
}

.site-menu {
  background: black;
  color: white;
  padding: 20px;
  /* */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* */
  width: 100%;
  max-width: 300px;
  /* */
  transform: translate(-290px); /* just to show a little */
  transition: .2s;
}

body.menu-open .site-menu {
  transform: translate(0);
}

JavaScript

function toggleMenu() {
	document.body.classList.toggle('menu-open');
}


document.addEventListener('click', function(click) { // on listener

	if ( click.target.matches('[rel="menu-toggle"]') ) { // many scenarios
  	toggleMenu();
  }
  
  if ( click.target.matches('a') ) {
  	click.preventDefault(); // just to stop the links for now...
    toggleMenu();
  }
  
})