How to Create a Full Screen Overlay Navigation Menu

A full-screen overlay navigation menu is a popular design trend in modern websites.

It is a stylish way to display the navigation links, often used in responsive web design.

The menu is displayed on top of the main content, covering the entire screen.

This type of menu is perfect for mobile devices and provides easy access to all the navigation links.

HTML Markup

The HTML structure of the overlay navigation menu is straightforward.

The main container is a div element with the class “overlay.” The navigation links are added inside the div element.

The menu button is also added inside the div element, which will toggle the visibility of the menu.

<div class="overlay">
  <a href="#" class="menu-button">Menu</a>
  <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

The overlay navigation menu requires CSS styles to control the appearance of the menu.

The menu is hidden by default, and the menu button is displayed at the top-right corner of the screen.

On clicking the menu button, the visibility of the menu is toggled.

The menu is displayed using the “display: block” property, and it is hidden using the “display: none” property.

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}

.menu-button {
position: absolute;
top: 20px;
right: 20px;
display: block;
padding: 10px;
color: #fff;
background-color: #333;
border-radius: 5px;
text-align: center;
cursor: pointer;
}

nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li {
display: inline-block;
margin: 0 20px;
}

nav a {
display: block;
padding: 10px 20px;
color: #fff;
background-color: #333;
border-radius: 5px;
}

JavaScript Code

To toggle the visibility of the menu, JavaScript code is used.

The code adds an event listener to the menu button, and on clicking the button, the “display” property of the overlay is changed.

const menuButton = document.querySelector('.menu-button');
const overlay = document.querySelector('.overlay');

menuButton.addEventListener('click', function() {
if (overlay.style.display === 'block') {
overlay.style.display = 'none';
} else {overlay.style.display = 'block';
}
});