How to Create Fullscreen Overlay Navigation Menu in JavaScript

In today’s world, a website’s navigation menu is one of the most important elements to enhance the user experience.

With a full-screen overlay navigation menu, you can provide a clean and elegant look to your website.

In this Javascript tutorial, we will discuss how to create a full-screen overlay navigation menu in JavaScript.

HTML Markup

To create an overlay navigation menu, we need to start by adding the basic HTML markup for our menu.

We will create a button to open the menu and a div element to hold our menu items.

<button class="menu-btn">Open Menu</button>

<div class="overlay-menu">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS Styles

In this step, we will add some styles to make the overlay menu look good. We will use CSS to make the overlay menu full-screen and hide it by default.

overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  display: none;
}

.menu-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
}

JavaScript Function

In this step, we will write a JavaScript function to toggle the display of the overlay menu when the menu button is clicked.

We will use the addEventListener method to attach a click event to the menu button and toggle the display property of the overlay menu.

const menuBtn = document.querySelector('.menu-btn');
const overlayMenu = document.querySelector('.overlay-menu');

menuBtn.addEventListener('click', () =&gt; {
  overlayMenu.style.display = (overlayMenu.style.display === 'block') ? 'none' : 'block';
});