<header class="site-header">
  <button class="open-menu-button">
    <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512">
      <title>Open menu</title>
      <path d="m464.883 64.267h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z" />
      <path d="m464.883 208.867h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z" />
      <path d="m464.883 353.467h-417.766c-25.98 0-47.117 21.137-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.012-21.137-47.149-47.117-47.149z" />
    </svg>
  </button>
  <nav class="site-navigation">
    <button class="close-menu-button">
      <svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512.001 512.001" viewBox="0 0 512.001 512.001">
        <title>Close menu</title>
        <path fill="currentColor" d="m512.001 84.853-84.853-84.853-171.147 171.147-171.148-171.147-84.853 84.853 171.148 171.147-171.148 171.148 84.853 84.853 171.148-171.147 171.147 171.147 84.853-84.853-171.148-171.148z" />
      </svg>
    </button>
    <ul>
      <li>
        <a href="#">First Link</a>
      </li>
      <li>
        <a href="#">Second Link</a>
      </li>
      <li>
        <a href="#">Third Link</a>
      </li>
    </ul>
  </nav>
</header>
<section class="page-content">
  <h1>Hello website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></p>
</section>
.site-header {
  display: flex;
  justify-content: flex-end;
  padding: 20px 40px;
}

.open-menu-button {
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: transparent;
  border: none;
}

.page-content {
  padding: 20px 40px;

  p {
    max-width: 600px;
  }
}

.close-menu-button {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 40px;
  width: 40px;
  height: 40px;
  padding: 10px;
  background-color: transparent;
  border: none;
  color: white;
  opacity: 0;
  transition: opacity ease 900ms;
}

.site-navigation {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateX(100%);
  transition: transform ease-out 450ms;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #58a;
  }

  ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(-95%);
    transition: transform ease-out 450ms;
  }

  li {
    margin: 20px 0;
    opacity: 0;
    transition: opacity ease 600ms;
  }

  a {
    font-size: 30px;
    font-weight: bold;
    color: white;
    text-decoration: none;
  }

  &.active {
    transform: translateX(0);
    transition: transform cubic-bezier(0.2, 0.6, 0.35, 1) 900ms;

    ul {
      transform: translateX(0);
      transition: transform cubic-bezier(0.2, 0.6, 0.35, 1) 900ms;
    }

    li {
      opacity: 1;
      transition: opacity ease 900ms 350ms;

      &:nth-child(2) {
        transition-delay: 450ms;
      }

      &:nth-child(3) {
        transition-delay: 550ms;
      }
    }

    .close-menu-button {
      opacity: 1;
      transition: opacity ease 900ms 900ms;
    }
  }
}
View Compiled
const openMenuButton: HTMLButtonElement = document.querySelector(
  ".open-menu-button"
);
const closeMenuButton: HTMLButtonElement = document.querySelector(
  ".close-menu-button"
);
const siteNavigaton: HTMLElement = document.querySelector(".site-navigation");

const handleHamburgerButtonClick = () => {
  siteNavigaton.classList.add("active");
};

const handleCloseButtonClick = () => {
  siteNavigaton.classList.remove("active");
};

openMenuButton.addEventListener("click", handleHamburgerButtonClick);
closeMenuButton.addEventListener("click", handleCloseButtonClick);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.