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:
