Information



Tags



Share

How to create overlay navigation in JavaScript and CSS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement



Definition

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.

Code

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:

X