Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 other. We can overlay images, pages, text, etc.
There are three ways to create a full−screen overlay navigation bar which are listed below.
From the left side,
From the top side, and
No animation.
There is no Direct way to create an overlay; you can overlay two HTML elements using the technologies specified above.
Steps to create a full-screen overlay navigation menu
Following are the steps to create full screen overlay navigation menu.
Create a div with class name overlay give the overlay styles as z−index:1, top:0, left:0, and overflow-x: hidden.
Create an openNav function and use the style inside the function to display the page 100% by using DOM (document.getElementById("myNav").style.width = "100%")
Create an closeNav function and use the style inside the function to hide the page by using DOM (document.getElementById("myNav").style.width = "0%")
Call the both function by using onClick method, openNav for open Button and closeNav for close button.
In the following example, we are creating a full−screen overlay navigation bar from the left.
Example.html
In this section, we are creating four types of links and adding the open and close buttons.
<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 element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
Example.css
In this section, we style the page's background color and change the color of the links when you hover over them. And if we style height: 100%; width: 0; in the overlay class, it will overlay from the left side.
<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 query*/
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
Example.js
In this part, we define two functions − openNav and closeNav. If you click on the menu button, the page will be visible in its full width. If you click the close button, the width of the page will be 0%.
<!-- Javascript -->
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
Complete 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 query*/
@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 element below menu bar.</p>
<span style="font-size: 30px; cursor: pointer; color: rgb(123, 234, 39)" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
2K+ Views
