<header>
   <h1>grid navigation</h1>
   <section id="menu-button" onclick="navMenu()">
      <div></div>
      <div></div>
      <div></div>
   </section>
</header>
<nav>
   <ul>
      <li><span>home</span></li>
      <li><span>about us</span></li>
      <li><span>blog</span></li>
      <li><span>store</span></li>
      <li><span>community</span></li>
      <li><span>contact us</span></li>
   </ul>
</nav>
<main></main>

<a href="https://youtu.be/mh3MR8TniBk" target="blank"><img src="https://assets.codepen.io/2475719/youtube-logo.png" /></a>

* {
   margin: 0;
   padding: 0;
   text-transform: uppercase;
   font-family: fredoka one;
}
body {
   width: 100vw;
   height: 100vh;
   display: grid;
   grid:
      "header" 10%
      "main" 90%;
}
header {
   grid-area: header;
   display: flex;
   align-items: center;
   padding: 10px;
   border-bottom: 3px solid black;
}
#menu-button {
   width: 45px;
   height: 45px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   z-index: 7;
   right: 10px;
   cursor: pointer;
}
#menu-button:hover div {
   background: coral !important;
   border-color: coral !important;
}
div {
   width: 100%;
   height: 20%;
   background: black;
   border: 1px solid black;
}
main {
   grid-area: main;
   background: silver;
}
nav {
   display: grid;
   position: fixed;
   z-index: 5;
   background: dimgray;
   width: 100vw;
   height: 100vh;
}
ul {
   width: 100%;
   height: 100%;
   display: grid;
   grid:
      "one two three"
      "four five six";
}
li {
   border: 1px solid black;
   background: white;
   list-style: none;
   height: 100%;
   width: 100%;
   display: grid;
   place-items: center;
   font-size: 2em;
   font-weight: 400;
}
li:nth-child(1) {
   grid-area: one;
   transform-origin: left;
}
li:nth-child(2) {
   grid-area: two;
   transform-origin: left;
}
li:nth-child(3) {
   grid-area: three;
   transform-origin: top;
}
li:nth-child(4) {
   grid-area: four;
   transform-origin: bottom;
}
li:nth-child(5) {
   grid-area: five;
   transform-origin: right;
}
li:nth-child(6) {
   grid-area: six;
   transform-origin: right;
}
li:hover {
   color: red;
   box-shadow: inset 0 0 20px 3px black;
   -webkit-text-stroke: 1px darkred;
   text-shadow: 2px 2px 2px black;
   font-weight: 900;
   transition: 0.125s;
}
span {
   cursor: pointer;
}

a {
   width: 100px;
   height: 75px;
   position: absolute;
   bottom: 10px;
   right: 10px;
}
img {
   width: 100%;
}

gsap.set("li", { transformPerspective: 50 });
var gridMenu = new TimelineMax({ paused: true, reversed: true });
gridMenu
   .to("menu-button", 0.5, {
      rotation: 3600,
      dropShadow: "0 2px 2px black"
   })
   .fromTo(
      "div",
      {
         borderColor: "black",
         backgroundColor: "black"
      },
      {
         borderColor: "red",
         backgroundColor: "red"
      },
      "<"
   )
   .to(
      "div:nth-child(2)",
      {
         opacity: 0,
         ease: Power2.easeInOut
      },
      "<"
   )
   .to(
      "div:nth-child(1)",
      0.5,
      {
         transformOrigin: "right",
         width: "100%",
         rotationZ: -45,
         ease: Power4.easeInOut,
         x: -10
      },
      "<"
   )
   .to(
      "div:nth-child(3)",
      0.5,
      {
         transformOrigin: "right",
         width: "100%",
         rotationZ: 45,
         ease: Power4.easeInOut,
         x: -10
      },
      "<"
   )
   .fromTo(
      "nav",
      0.5,
      {
         height: 0,
         display: "none"
      },
      {
         height: "100vh",
         display: "block",
         ease: Back.easeOut
      },
      "<"
   )
   .fromTo(
      "li:nth-child(1)",
      0.125,
      {
         rotateY: 90
      },
      {
         rotateY: 0
      }
   )

   .fromTo(
      "li:nth-child(2)",
      0.125,
      {
         rotateY: 90
      },
      {
         rotateY: 0
      }
   )

   .fromTo(
      "li:nth-child(3)",
      0.125,
      {
         rotateX: -90
      },
      {
         rotateX: 0
      }
   )

   .fromTo(
      "li:nth-child(6)",
      0.125,
      {
         rotateY: -90
      },
      {
         rotateY: 0
      }
   )

   .fromTo(
      "li:nth-child(5)",
      0.125,
      {
         rotateY: -90
      },
      {
         rotateY: 0
      }
   )

   .fromTo(
      "li:nth-child(4)",
      0.125,
      {
         rotateX: 90
      },
      {
         rotateX: 0
      }
   );

function navMenu() {
   gridMenu.reversed() ? gridMenu.play() : gridMenu.reverse();
}