JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="menu-small">
  <span class="menu-circle"></span>
  <a href="#" class="menu-link">
    <span class="menu-icon">
      <span class="menu-line menu-line-1"></span>
      <span class="menu-line menu-line-2"></span>
      <span class="menu-line menu-line-3"></span>
    </span>
  </a>
</div>

<div class="menu-overlay">
  <ul class="items">
    <li><a href="#welcome">Welcome</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contacts">Contacts</a></li>
  </ul>
</div>




<div>


  <article id="welcome">
    <h1>WELCOME</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum venenatis velit eget consectetur. Maecenas eget feugiat lectus. Etiam commodo, est nec venenatis consectetur, velit nisi accumsan sem, ornare dignissim ante magna at arcu. Curabitur pharetra a arcu nec tempor.
    </p>
  </article>


  <article id="services">
    <h1>SERVICES</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum venenatis velit eget consectetur. Maecenas eget feugiat lectus. Etiam commodo, est nec venenatis consectetur, velit nisi accumsan sem, ornare dignissim ante magna at arcu. Curabitur pharetra a arcu nec tempor.
    </p>
  </article>


  <article id="about">
    <h1>ABOUT</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum venenatis velit eget consectetur. Maecenas eget feugiat lectus. Etiam commodo, est nec venenatis consectetur, velit nisi accumsan sem, ornare dignissim ante magna at arcu. Curabitur pharetra a arcu nec tempor.
    </p>
  </article>


  <article id="contacts">
    <h1>CONTACTS</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum venenatis velit eget consectetur. Maecenas eget feugiat lectus. Etiam commodo, est nec venenatis consectetur, velit nisi accumsan sem, ornare dignissim ante magna at arcu. Curabitur pharetra a arcu nec...

CSS

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;

}

.menu-small {
  position: absolute;
  top: 15px;
  right: 15px;
  height: 40px;
  width: 40px;
}


.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

/* ------------- */

.menu-line {
  background-color: white;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.25s ease-in-out;
}

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  bottom: 0;
}

.menu-small.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu-small.open .menu-line-2 {
  opacity: 0;
}

.menu-small.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

/* ------------- */

.menu-circle {
  background-color: #B1B0BB;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

.menu-small:hover .menu-circle {
  transform: scale(1.3);
}

.menu-small.open .menu-circle {
  transform: scale(60);
}

/* ------------- */

.menu-overlay {
  background-color: #D1CFD6;
  height: 100%;
  width: 100%;
  position: fixed;
  text-align: center;
  transition: opacity 0.5s ease-in-out;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ------------- */

.menu-overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;

}

.menu-overlay li {
  width: 100%;
  text-align: center;
}

.menu-overlay li a {
  display: block;
  text-decoration: none;
  font-size: 12vh;
  font-weight: bold;
  padding: 2vh 0;
  color: black;
 ...

JavaScript

$(function() {
  
  $(".menu-link").click(function(e) {
    e.preventDefault();
    
    $(".menu-overlay").toggleClass("open");
    $(".menu-small").toggleClass("open");

  });
	
});