<body>
    <header
      class="container flex justify-between items-center h-8 mt-8 px-4 mx-auto"
    >
      <div class="logo">
        <a href="/" aria-label="home">
          <span class="text-white font-medium text-lg">@jpcarvalho</span>
        </a>
      </div>

      <div id="navigation__toggle" class="flex flex-col w-12 my-auto ">
        <span
          id="navigation__toggle__one"
          class="bg-white w-full h-0.5 w-12"
        ></span>
        <span
          id="navigation__toggle__two"
          class="bg-white w-full h-0.5 w-12 mt-2"
        ></span>
      </div>
    </header>
    <div
      id="menu"
      class="mx-auto absolute left-0 top-0 w-screen"
    >
      <div class="flex flex-row justify-center w-full mt-32">
        <div id='menu_item' class="flex flex-col gap-y-8 text-center">
          <span class="text-4xl text-white font-bold">
            Home
          </span>
          <span class="text-4xl text-white font-bold">
            About Me
          </span>
          <span class="text-4xl text-white font-bold">
            Portfolio
          </span>
          <span class="text-4xl text-white font-bold">
            Blog
          </span>
          <span class="text-4xl text-white font-bold">
            Open Source
          </span>
        </div>
      </div>
    </div>
  </body>

body {
  background: #00a8ff;
  margin: 0;
}

#navigation__toggle {
  z-index: 10;
  cursor: pointer;
}

.logo {
  z-index: 10;
}

#navigation__toggle span {
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.navigation__toggle__one__animation {
  transform: translateY(5px) rotate(45deg);
}

.navigation__toggle__two__animation {
  transform: translateY(-5px) rotate(-45deg);
}

#menu {
  background: #00cec9;
  height: 0vh;
  transition: height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: -10;
}

.menu_activated {
  z-index: 5 !important;
  height: 100vh !important;
}

#menu_item span {
  opacity: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.5s cubic-bezier(0.38, 0.18, 0, 1);
}

#menu_item span:hover {
  color: #6c5ce7;
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.menu_item_animation {
  opacity: 1 !important;
}
document.getElementById('navigation__toggle').addEventListener('click', e => {
  
  let navigation__toggle__one = document.getElementById(
    'navigation__toggle__one'
  );
  
  let navigation__toggle__two = document.getElementById(
    'navigation__toggle__two'
  );
  
  navigation__toggle__one.classList.toggle(
    'navigation__toggle__one__animation'
  );
  
  navigation__toggle__two.classList.toggle(
    'navigation__toggle__two__animation'
  );
  
  document.getElementById('menu').classList.toggle('menu_activated');
  
  let menuItems = document
    .querySelectorAll("#menu_item span");
  
  [].forEach.call(menuItems, function(item) {
    item.classList.toggle('menu_item_animation');
  });
   
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.