📜  如何为移动设备创建汉堡菜单?

📅  最后修改于: 2021-10-29 06:23:12             🧑  作者: Mango

汉堡按钮是放置在网页用户界面上角的按钮。汉堡包按钮可切换屏幕上的导航菜单栏。与此小部件关联的图标由三个水平条组成,也称为折叠菜单图标。

我们将创建:

  • 在移动设备上使用 html、CSS 和 JavaScript 的汉堡菜单
  • 使用 Bootstrap 的汉堡菜单

在移动设备上使用 html、CSS 和 JavaScript 的汉堡菜单:我们将编写我们自己的所有 HTML 和 CSS,并添加一些 JavaScript 来处理点击事件。基本方法是将导航栏的可见性标记为隐藏。当用户单击该图标时,JavaScript 将从隐藏中删除可见性。

HTML


  

    
    
  
    
      
    GFG Hamburger Menu Tutorial
  
    

  

    
             
          


HTML


  

    
    
    
  
    
  
    GFG Hamburger Menu
  
    

  

    
                             
            
Hamburger Menu
                 

                Click on the icon present                  at top left corner.             

           
    
              


输出:

使用 Bootstrap 的汉堡菜单:在这种方法中,我们将使用引导程序来设计我们的页面,JavaScript 工作与上述方法相同。

HTML



  

    
    
    
  
    
  
    GFG Hamburger Menu
  
    

  

    
                             
            
Hamburger Menu
                 

                Click on the icon present                  at top left corner.             

           
    
              

输出: