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

0 0 3 minutes read

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> 