How to Create Full Screen Overlay Navigation Bar using HTML CSS and JavaScript ? - GeeksforGeeks

24 Apr, 2020
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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML