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

📅  最后修改于: 2021-11-08 05:45:39             🧑  作者: Mango

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

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

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

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

            ×                  
        About         Services         Clients         Contact     
   open

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


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


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



  

    
    

  

  
    
                     ×                  
            About             Practice             Courses             Contact         
    
                ≡             

GeeksForGeeks

       

        Click on the nav bar icon          to see full screen overlay:     

          

输出:

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



  

    
    

  

  
    
                     ×                  
            About             Practice             Courses             Contact         
    
                    ≡             

GeeksForGeeks

       

        Click on the nav bar icon         to see full screen overlay:     

          

输出:

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



  

    
  
    

  

  
    
                     ×                     
            About             Practice             Courses             Contact         
    
                ≡             

GeeksForGeeks

           

        Click on the nav bar icon to         see full screen overlay:     

          

输出: