Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a full screen overlay navigation menu with CSS and JavaScript?
In this article, we are going to discuss how to create a full-screen overlay navigation menu with CSS and JavaScript.
Overlay in web applications is nothing but transposing one HTML element over another. We can overlay images, pages, text, etc. A full-screen overlay navigation provides an elegant way to display navigation links that cover the entire viewport when activated.
There are three ways to create a full-screen overlay navigation bar which are listed below:
From the left side
From the top side
No animation
There is no direct way to create an overlay; you overlay HTML elements using CSS positioning and JavaScript for interactivity.
Steps to Create a Full-Screen Overlay Navigation Menu
Following are the steps to create a full-screen overlay navigation menu:
Create a div with class name "overlay" and give it styles: z-index: 1, position: fixed, top: 0, left: 0, width: 0, height: 100%, and overflow-x: hidden
Create an
openNav()function that sets the overlay width to 100% using DOM manipulation: document.getElementById("myNav").style.width = "100%"Create a
closeNav()function that hides the overlay by setting width to 0: document.getElementById("myNav").style.width = "0%"Call both functions using onClick method - openNav for the menu button and closeNav for the close button
HTML Structure
First, create the HTML structure with the overlay container and navigation links:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation</h2>
<p>Click on the hamburger menu below to open the overlay.</p>
<span style="font-size: 30px; cursor: pointer; color: #7BEA27" onclick="openNav()">?</span>
</body>
</html>
CSS Styling
Add CSS to style the overlay and create the slide-in animation from the left:
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
JavaScript Functions
Add JavaScript functions to control the overlay visibility:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 18, 18);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: absolute;
display: grid;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
width: 40%;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 30px;
color: white;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Navigation</h2>
<p>Click on the hamburger menu below to open the overlay.</p>
<span style="font-size: 30px; cursor: pointer; color: #7BEA27" onclick="openNav()">?</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
How It Works
The overlay starts with width: 0 and is hidden. When openNav() is called, the width changes to 100%, triggering a CSS transition that creates a smooth slide-in effect from the left. The closeNav() function reverses this by setting the width back to 0%.
Key Features
Fixed positioning: Ensures the overlay covers the entire viewport
CSS transitions: Create smooth animations when opening/closing
Responsive design: Media queries adjust font sizes on smaller screens
Centered content: Navigation links are perfectly centered using CSS transform
Conclusion
Full-screen overlay navigation provides an elegant solution for mobile-friendly menus. The combination of CSS transitions and JavaScript DOM manipulation creates a smooth, professional user experience that works across all devices.
2K+ Views
