Responsive Overlay Menu Navigation in Javascript Library

Menu Overlay is a hamburger navigation system that reveals a full-screen overlay menu with a background image on switching.

fullscreen overlay menu codepen, full screen overlay navigation, fullscreen overlay menu, full screen popup, responsive overlay menu navigation codepen, overlay menu css

How to make use of it:

1. Code the HTML for the hamburger toggler.

<div class="menu-button">
  <span></span>
  <span></span>
  <span></span>
</div>

2. Code the HTML for the overlay menu.

<div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.45 95.26">
        <g id="Layer_2" data-name="Layer 2">
          <g id="Layer_1-2" data-name="Layer 1">
            <path
              d="M74.47,68.66c0,15.45-14.18,26.56-37.24,26.56C23.78,95.22,7.77,89.77,0,80.65l1.77-29.6H3.92C8.12,75.4,21.34,91.21,38.56,91.21c13.12,0,24.23-8.25,24.32-18.64.08-9.13-13.31-14.93-25-19.24L30,50.54C17.58,46,1,39.4,1,24.32,1,10.39,15.37,0,37.28,0c12.92,0,21.57,1.52,30,5l2,26-1,.05C62.26,13.47,48.84,3.19,35.76,3.19c-14.66,0-23.23,6.18-23.23,15.05,0,10.89,12,15.71,24.59,20.4L45,41.55C59.18,46.87,74.47,53,74.47,68.66Z"
            />
            <path
              d="M159.37,28.53l-1,0C150,7.13,146.51,3.8,129.9,3.8h-4.62V72.66c0,11.35,1,18.15,3.85,20.15v.93H108.51v-.93c2.82-2,3.85-8.8,3.85-20.15v-68h-4.63C92.29,4.65,87.8,8,79.36,28.53H78.27l3.81-27h75.35Z"
            />
            <path
              d="M238.68,93.9H219.57s0-1,0-1.32c0-18.19-11.25-40.1-11.25-40.1-13.73-.65-32.81,4.23-43.25,16.4-.81,2.23-1.5,4.19-2,5.78-1,2.91-3.74,11.53-3,19.24H149.83L185.1,4a11.54,11.54,0,0,0-4.83-.83V1.52h20.46ZM206.25,47.22,190.14,5.58h-.93c-3.77,9.64-13.26,33.93-20.09,52.21l.44.76A159.36,159.36,0,0,1,206.25,47.22Z"
            />
            <path
              d="M295.77,51.91c9.62,6.9,29.14,41.85,29.14,41.85H303.39c-.05-13.56-4-23.89-13.44-39-.69-1.11-1.54-1.56-9.16-1.56H262V72.66c0,11.35,1,18.15,3.85,20.15v.93H245.2v-.93c2.66-1.89,3.72-8,3.84-18.26V6.39c0-2.42-2.75-3.06-4.77-3.21h-1.41V1.52h39.19c24.33,0,37.37,7.6,37.37,23.31,0,13.05-11.7,23.19-23.62,26.23C295.8,51.06,295.6,51.79,295.77,51.91Zm10.61-26.19c0-13.43-8.11-21.07-24.83-21.07H262V49.28c2.91.5,19.46.76,22,.76C297.76,50,306.38,38.89,306.38,25.72Z"
            />
            <path
              d="M417.68,50c0,26.57-11.58,45.26-40.13,45.26-29.51,0-47.46-17.36-47.46-47C330.09,18.88,351,0,378.61,0c14.82,0,23.91,2.83,32.79,7.79l1.41,25.73-1.44,0c-8.28-21.92-19.93-30.38-33.9-30.38-20.27,0-33.19,16.7-33.19,44.19,0,26.85,12.89,44.79,34.42,44.79C395.09,92.17,406,75.6,406,56.39c0-3-1.8-4.22-4.42-4.22-4.53,0-15.08,3.72-21.29,8.79l-.68,0-5.71-11.2V49h42.88S417.68,49.75,417.68,50Z"
            />
            <path
              d="M507.76,93.9H488.65s0-1,0-1.32c0-18.19-11.24-40.1-11.24-40.1-13.74-.65-32.82,4.23-43.26,16.4-.81,2.23-1.5,4.19-2,5.78-1,2.91-3.74,11.53-3,19.24H418.91L454.18,4a11.52,11.52,0,0,0-4.82-.83V1.52h20.45ZM475.33,47.22,459.22,5.58h-.93C454.52,15.22,445,39.51,438.2,57.79l.44.76A159.36,159.36,0,0,1,475.33,47.22Z"
            />
            <path
              d="M585.63,59l-5.57,34.72H511V92.43L566.21,4.75h-8.47c-22.24,0-34,5.87-43.79,29.53h-1.21l6.61-32.76h63.79V2.7L528.52,90.45h10.79c27.21,0,34.6-10.42,44.83-31.42Z"
            />
            <path
              d="M662.66,61.86,658.5,93.74H594.64v-.93c2.83-2,3.86-8.8,3.86-20.15V6.38c0-2.41-2.75-3-4.77-3.2h-1.41V1.52h64.14l4.7,29h-1.41C652.47,9.92,646.33,4.65,627.07,4.65H611.42v39.5h14.51c13.68,0,22.68-.89,26.6-2.54h.26v8.71h-.26c-3.92-1.65-12.92-3-26.6-3H611.42V90.61h16.91c19.87-.81,25.52-5.89,32.71-28.73Z"
            />
            <path
              d="M722.32,51.91c9.62,6.9,29.13,41.85,29.13,41.85H729.94c-.05-13.56-4-23.89-13.44-39-.69-1.11-1.55-1.56-9.16-1.56H688.5V72.76l0-.1c0,11.35,1,18.15,3.85,20.15v.93H671.74v-.93c2.66-1.89,3.73-8,3.84-18.26V6.39c0-2.42-2.74-3.06-4.77-3.21h-1.4V1.52H708.6c24.32,0,37.37,7.6,37.37,23.31,0,13.05-11.7,23.19-23.62,26.23C722.35,51.06,722.15,51.79,722.32,51.91Zm10.61-26.19c0-13.43-8.11-21.07-24.83-21.07H688.51V49.28c2.91.5,19.46.76,22,.76C724.31,50,732.92,38.89,732.93,25.72Z"
            />
          </g>
        </g>
      </svg>
    </div>

    <div class="menu-button">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <div class="menu-overlay">
      <a class="work-link" href="https://www.chris-hortsch.de" target="_blank" rel="dofollow">Chris Hortsch Webdesign</a>
      <div class="nav">
        <div class="logo">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.45 95.26">
            <g id="Layer_2" data-name="Layer 2" style="fill: white">
              <g id="Layer_1-2" data-name="Layer 1">
                <path
                  d="M74.47,68.66c0,15.45-14.18,26.56-37.24,26.56C23.78,95.22,7.77,89.77,0,80.65l1.77-29.6H3.92C8.12,75.4,21.34,91.21,38.56,91.21c13.12,0,24.23-8.25,24.32-18.64.08-9.13-13.31-14.93-25-19.24L30,50.54C17.58,46,1,39.4,1,24.32,1,10.39,15.37,0,37.28,0c12.92,0,21.57,1.52,30,5l2,26-1,.05C62.26,13.47,48.84,3.19,35.76,3.19c-14.66,0-23.23,6.18-23.23,15.05,0,10.89,12,15.71,24.59,20.4L45,41.55C59.18,46.87,74.47,53,74.47,68.66Z"
                />
                <path
                  d="M159.37,28.53l-1,0C150,7.13,146.51,3.8,129.9,3.8h-4.62V72.66c0,11.35,1,18.15,3.85,20.15v.93H108.51v-.93c2.82-2,3.85-8.8,3.85-20.15v-68h-4.63C92.29,4.65,87.8,8,79.36,28.53H78.27l3.81-27h75.35Z"
                />
                <path
                  d="M238.68,93.9H219.57s0-1,0-1.32c0-18.19-11.25-40.1-11.25-40.1-13.73-.65-32.81,4.23-43.25,16.4-.81,2.23-1.5,4.19-2,5.78-1,2.91-3.74,11.53-3,19.24H149.83L185.1,4a11.54,11.54,0,0,0-4.83-.83V1.52h20.46ZM206.25,47.22,190.14,5.58h-.93c-3.77,9.64-13.26,33.93-20.09,52.21l.44.76A159.36,159.36,0,0,1,206.25,47.22Z"
                />
                <path
                  d="M295.77,51.91c9.62,6.9,29.14,41.85,29.14,41.85H303.39c-.05-13.56-4-23.89-13.44-39-.69-1.11-1.54-1.56-9.16-1.56H262V72.66c0,11.35,1,18.15,3.85,20.15v.93H245.2v-.93c2.66-1.89,3.72-8,3.84-18.26V6.39c0-2.42-2.75-3.06-4.77-3.21h-1.41V1.52h39.19c24.33,0,37.37,7.6,37.37,23.31,0,13.05-11.7,23.19-23.62,26.23C295.8,51.06,295.6,51.79,295.77,51.91Zm10.61-26.19c0-13.43-8.11-21.07-24.83-21.07H262V49.28c2.91.5,19.46.76,22,.76C297.76,50,306.38,38.89,306.38,25.72Z"
                />
                <path
                  d="M417.68,50c0,26.57-11.58,45.26-40.13,45.26-29.51,0-47.46-17.36-47.46-47C330.09,18.88,351,0,378.61,0c14.82,0,23.91,2.83,32.79,7.79l1.41,25.73-1.44,0c-8.28-21.92-19.93-30.38-33.9-30.38-20.27,0-33.19,16.7-33.19,44.19,0,26.85,12.89,44.79,34.42,44.79C395.09,92.17,406,75.6,406,56.39c0-3-1.8-4.22-4.42-4.22-4.53,0-15.08,3.72-21.29,8.79l-.68,0-5.71-11.2V49h42.88S417.68,49.75,417.68,50Z"
                />
                <path
                  d="M507.76,93.9H488.65s0-1,0-1.32c0-18.19-11.24-40.1-11.24-40.1-13.74-.65-32.82,4.23-43.26,16.4-.81,2.23-1.5,4.19-2,5.78-1,2.91-3.74,11.53-3,19.24H418.91L454.18,4a11.52,11.52,0,0,0-4.82-.83V1.52h20.45ZM475.33,47.22,459.22,5.58h-.93C454.52,15.22,445,39.51,438.2,57.79l.44.76A159.36,159.36,0,0,1,475.33,47.22Z"
                />
                <path
                  d="M585.63,59l-5.57,34.72H511V92.43L566.21,4.75h-8.47c-22.24,0-34,5.87-43.79,29.53h-1.21l6.61-32.76h63.79V2.7L528.52,90.45h10.79c27.21,0,34.6-10.42,44.83-31.42Z"
                />
                <path
                  d="M662.66,61.86,658.5,93.74H594.64v-.93c2.83-2,3.86-8.8,3.86-20.15V6.38c0-2.41-2.75-3-4.77-3.2h-1.41V1.52h64.14l4.7,29h-1.41C652.47,9.92,646.33,4.65,627.07,4.65H611.42v39.5h14.51c13.68,0,22.68-.89,26.6-2.54h.26v8.71h-.26c-3.92-1.65-12.92-3-26.6-3H611.42V90.61h16.91c19.87-.81,25.52-5.89,32.71-28.73Z"
                />
                <path
                  d="M722.32,51.91c9.62,6.9,29.13,41.85,29.13,41.85H729.94c-.05-13.56-4-23.89-13.44-39-.69-1.11-1.55-1.56-9.16-1.56H688.5V72.76l0-.1c0,11.35,1,18.15,3.85,20.15v.93H671.74v-.93c2.66-1.89,3.73-8,3.84-18.26V6.39c0-2.42-2.74-3.06-4.77-3.21h-1.4V1.52H708.6c24.32,0,37.37,7.6,37.37,23.31,0,13.05-11.7,23.19-23.62,26.23C722.35,51.06,722.15,51.79,722.32,51.91Zm10.61-26.19c0-13.43-8.11-21.07-24.83-21.07H688.51V49.28c2.91.5,19.46.76,22,.76C724.31,50,732.92,38.89,732.93,25.72Z"
                />
              </g>
            </g>
          </svg>
        </div>
        <nav class="nav__items">
          <p class="nav__category">Rainbow lorem ipsum</p>
          <a class="nav__item" href="#">Nine Years</a>
          <a class="nav__item" href="#">Worth Of Breakin'</a>
          <a class="nav__item" href="#">My Back</a>
        </nav>

        <nav class="nav__items">
          <p class="nav__category">Stargazer lorem ipsum</p>
          <a class="nav__item" href="#">There's No Sun</a>
          <a class="nav__item" href="#">In The Shadow Of The Wizard</a>
          <a class="nav__item" href="#">See How He Glides</a>
        </nav>
      </div>

      <div class="menu-overlay__image">
        <img
          src="https://images.unsplash.com/photo-1627952073979-e40605fd8b17?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1875&q=80"
          alt=""
        />
      </div>
    </div>

3. Code the CSS.

/* hamburger button */
.menu-button {
  width: 1.5rem;
  position: fixed;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
  height: calc(0.25rem * 5);
  z-index: 666;
}

.menu-button span {
  width: 1.5rem;
  height: 0.25rem;
  background-color: black;
  display: block;
  position: absolute;
  transition: all 0.6s ease;
}

.menu-button span:nth-of-type(2) {
  top: calc(0.25rem * 2);
}

.menu-button span:nth-of-type(3) {
  top: calc(0.25rem * 4);
}

.menu-button.active span {
  background-color: white;
}

.menu-button.active span:nth-of-type(1) {
  transform: translateY(0.5rem) rotate(-45deg);
}

.menu-button.active span:nth-of-type(2) {
  transform: translateX(1.5rem);
  opacity: 0;
}

.menu-button.active span:nth-of-type(3) {
  transform: translateY(-0.5rem) rotate(45deg);
}

/* overlay menu */
.menu-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: black;
  display: grid;
  grid-template-columns: 3fr 4fr;
  color: white;
  transform: translateX(100%);
  transition: all 0.6s ease-in-out;
}

.menu-overlay.open {
  transform: translateX(0);
}

.menu-overlay.open .menu-overlay__image img {
  animation: fadeIn 0.8s ease-in-out 0.6s forwards;
}

.menu-overlay.open .nav {
  animation: fadeIn 0.8s ease-in-out 0.2s forwards;
}

.menu-overlay__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.nav {
  padding: 2rem;
  opacity: 0;
}

.nav__items {
  display: flex;
  flex-direction: column;
}

.nav__items:not(:first-child) {
  margin-top: 4rem;
}

.nav__category {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.125em;
  opacity: 0.5;
}

.nav__item {
  color: white;
  margin-top: 1rem;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.nav__item::before {
  content: "";
  height: 1px;
  width: 0;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
}

.nav__item:hover {
  padding-left: calc(2rem + 1rem);
}

.nav__item:hover::before {
  width: 2rem;
}

// animation
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

4. Enable the hamburger toggled to open the overlay menu.

const menuButton = document.querySelector(".menu-button");
const menuOverlay = document.querySelector(".menu-overlay");
menuButton.addEventListener("click", function () {
  menuButton.classList.toggle("active");
  menuOverlay.classList.toggle("open");
});

Fullscreen Overlay Menu In JavaScript Library, Overlay menu Plugin/Github, full screen overlay css