Create a full screen Navigation Bar: In this article, you will learn how to create a full-screen navbar for your website. There are three methods to create a full screen overlay navigation bar which are listed below:
- From Left
- From top
- No animation- Just show
You will be required to create two divs. One for the overlay container and the other for the overlay content container.
Step 1: The first step is to create an HTML file.
<div id="myNav" class="overlay"> <!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">× </a> <!-- Overlay content --> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <!-- Use any element to open/show the overlay navigation menu --><span onclick="openNav()">open</span></div> |
Step 2: Add CSS to the file.
<style> overlay { height: 100%; width: 0; position: fixed; ] z-index: 1; left: 0; top: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); overflow-x: hidden; transition: 0.5s; } ].overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; /* Display block instead of inline */ display: block; /* Transition effects on hover (color) */ transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a { font-size: 20px } .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } </style> |
Step 3: In the final step add JavaScript to the files.
<script> function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } //or function openNav() { document.getElementById("myNav").style.display = "block"; } function closeNav() { document.getElementById("myNav").style.display = "none"; } </script> |
Example 1: This example creating the Full Screen Overlay Navigation Bar from left.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .overlay { height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: #1a6e1a; overflow-x: hidden; transition: 1.0s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; } .overlay a { padding: 10px; text-decoration: none; font-size: 40px; color: white; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: black; } .overlay .closebtn { position: absolute; top: 10px; right: 35px; font-size: 70px; } </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="#">Practice</a> <a href="#">Courses</a> <a href="#">Contact</a> </div> </div> <span style="font-size:35px;cursor:pointer" onclick="openNav()"> ≡ </span> <h2>GeeksForGeeks</h2> <p> Click on the nav bar icon to see full screen overlay: </p> <script> function openNav() { document.getElementById( "myNav").style.width = "100%"; } function closeNav() { document.getElementById( "myNav").style.width = "0%"; } </script> </body> </html> |
Output:
Example 2: This example creating the Full-Screen Overlay Navigation Bar from the top.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .overlay { height: 0%; width: 100%; position: fixed; top: 0; left: 0; background-color: #1a6e1a; overflow-y: hidden; transition: 1.0s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; } .overlay a { padding: 10px; text-decoration: none; font-size: 40px; color: white; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: black; } .overlay .closebtn { position: absolute; top: 10px; right: 35px; font-size: 70px; } </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="#">Practice</a> <a href="#">Courses</a> <a href="#">Contact</a> </div> </div> <span style="font-size:35px;cursor:pointer" onclick="openNav()"> ≡ </span> <h2>GeeksForGeeks</h2> <p> Click on the nav bar icon to see full screen overlay: </p> <script> function openNav() { document.getElementById( "myNav").style.height = "100%"; } function closeNav() { document.getElementById( "myNav").style.height = "0%"; } </script> </body> </html> |
Output:
Example 3: This example creating the Full-Screen Overlay Navigation Bar without animation.
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <style> .overlay { height: 100%; width: 100%; display: none; position: fixed; top: 0; left: 0; background-color: #1a6e1a; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; } .overlay a { padding: 10px; text-decoration: none; font-size: 40px; color: white; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: black; } .overlay .closebtn { position: absolute; top: 10px; right: 35px; font-size: 70px; } </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="#">Practice</a> <a href="#">Courses</a> <a href="#">Contact</a> </div> </div> <span style="font-size:35px;cursor:pointer" onclick="openNav()"> ≡ </span> <h2>GeeksForGeeks</h2> <p> Click on the nav bar icon to see full screen overlay: </p> <script> function openNav() { document.getElementById( "myNav").style.display = "block"; } function closeNav() { document.getElementById( "myNav").style.display = "none"; } </script> </body> </html> |
Output:
