Press "Enter" to skip to content

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


See Demo And Download

Official Website(thrgsmypny): Click Here

This superior jQuery/javascript plugin is developed by thrgsmypny. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.