如何使用 HTML CSS 和 JavaScript 创建全屏覆盖导航栏？

创建全屏导航栏：在本文中，您将学习如何为您的网站创建全屏导航栏。下面列出了三种创建全屏覆盖导航栏的方法：

• 从左
• 从顶部
• 没有动画 – 只是显示

您将需要创建两个 div。一个用于覆盖容器，另一个用于覆盖内容容器。

第 1 步：第一步是创建一个 HTML 文件。

  
    
    ×
    
  
    
    

        About
        Services
        Clients
        Contact
    

  

open

第 2 步：将 CSS 添加到文件中。

第 3 步：在最后一步中，将 JavaScript 添加到文件中。

    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";
    }

示例 1：此示例从左侧创建全屏覆盖导航栏。

  

    
    
        .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;
        }
    

  

  
    
        
            ×
        
        
            About
            Practice
            Courses
            Contact
        
    
  
    
        ≡
    
  
    GeeksForGeeks
  
    
        Click on the nav bar icon 
        to see full screen overlay:
    
  
    
        function openNav() {
            document.getElementById(
                "myNav").style.width = "100%";
        }
  
        function closeNav() {
            document.getElementById(
                "myNav").style.width = "0%";
        }
    

  

输出：

示例 2：此示例从顶部创建全屏覆盖导航栏。

  

    
    
        .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;
        }
    

  

  
    
        
            ×
        
        
            About
            Practice
            Courses
            Contact
        
    
      
    
        ≡
    
  
    GeeksForGeeks
  
    
        Click on the nav bar icon
        to see full screen overlay:
    
  
    
        function openNav() {
            document.getElementById(
                "myNav").style.height = "100%";
        }
  
        function closeNav() {
            document.getElementById(
                "myNav").style.height = "0%";
        }
    

  

输出：

示例 3：此示例创建没有动画的全屏覆盖导航栏。

  

    
  
    
        .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;
        }
    

  

  
    
        
            ×
        
  
        
            About
            Practice
            Courses
            Contact
        
    
  
    
        ≡
    
  
    GeeksForGeeks
      
    
        Click on the nav bar icon to
        see full screen overlay:
    
  
    
        function openNav() {
            document.getElementById(
                "myNav").style.display = "block";
        }
  
        function closeNav() {
            document.getElementById(
                "myNav").style.display = "none";
        }
    

  

输出：