Advertisement:
Read Later
In this tutorial, I will show you how to create full-screen overlay navigation with JavaScript in HTML for your web projects, which is sacrosanct in developing web pages.
Create a button to open the overlay, named the overlayButton.
Add a click event listener on the overlayButton to detect whether it is clicked or not.
Select the first section element under the container as the overlay by using the querySelector() method to change its width from 0 to one hundred percent in one-second transition.
Even if you do not need to use the querySelector() method again, you can select the span element in the overlay by using it as I did. After selecting the span element, add a click event listener on it to change the overlay width from one hundred percent to 0.
To make the overlay background transparent, use the rgba(x, x, x, y) property in CSS.
To hide the elements inside the overlay, use the overflow-x property as hidden.
/* ---------- JavaScript ---------- */
var overlayButton = document.getElementById("overlayButton");
var container = document.getElementsByClassName("container")[0];
var overlay = container.querySelector("section");
overlayButton.addEventListener("click", function(){
overlay.style.width = "100%";
});
overlay.querySelector("span").addEventListener("click", function(){
overlay.style.width = "0";
});
/* ---------- CSS ---------- */
.container{position:relative;width:95%;height:500px;background-color:#FAAF18;margin:auto;}
.container button{position:relative;top:25%;display:block;width:70%;margin:auto;background-color:#EE1D23;border:2px solid #185494;border-radius:20px;cursor:pointer;color:#FAAF18;font-size:25px;}
.container button:hover{background-color:#185494;}
.container section{display:block;position:absolute;top:0;left:0;width:0;height:100%;z-index:1;background-color:rgba(0, 0, 0, 0.7);transition:1s;overflow-x:hidden;}
.container section span{color:#FAAF18;font-size:25px;position:absolute;top:0;right:0;cursor:pointer;}
.container section span:hover{color:yellow;}
/* ---------- HTML ---------- */
<div class="container">
<button id="overlayButton"> ☰ Overlay</button>
<section>
<div>
<span>X</span>
<br><br><br><br>
<button>Home</button><br>
<button>Projects</button><br>
<button>Tools</button><br>
<button>Articles</button><br>
<button>Search</button><br>
</div>
</section>
</div>
Result: