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

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

我们将创建：

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

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

HTML

  

    
    
  
    
      
    GFG Hamburger Menu Tutorial
  
    
        .container {
            max-width: 480px;
            height: 500px;
            background: #5555;
            margin: auto;
            border: 2px solid green;
        }
  
        .navbar {
            background: white;
            position: relative;
        }
  
        .links {
            display: none;
        }
  
        .heading a:nth-child(2) {
            color: green;
            text-decoration: none;
            font-size: 20px;
            display: block;
            padding: 7px;
            margin-left: 150px;
        }
  
        .heading a i {
            color: green;
            padding: 10px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
  
        .heading a i:hover {
            background-color: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
        }
  
        .links {
            background-color: rgb(190, 196, 190);
        }
  
        .links a {
            color: green;
            padding: 5px 16px;
            text-decoration: none;
            font-size: 17px;
            display: block;
            text-align: center;
            border-bottom: 1px solid white;
        }
  
        .links a:hover {
            background-color: green;
            color: white;
        }
    

  

    
        
            
                
                    
                
                 Geeks For Geeks 
            
            
                 Notes 
                 Algorithm 
                 Maths 
                 Data Structure 
                 Java 
            
        
    
  
    
        function gfgMenu() {
            const GFG = document.querySelector('.links');
  
            if (GFG.style.display === "none") {
                GFG.style.display = "block";
            }
            else {
                GFG.style.display = "none";
            }
        }
    

  

输出：

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

HTML

  

    
    
    
  
    
  
    GFG Hamburger Menu
  
    
        .icon,
        h5 {
            color: green;
        }
  
        .links a:hover,
        .icon:hover {
            background-color: green;
            color: white;
            transition: 0.4s all linear;
        }
    

  

    
        
            
  
                
            
             
                Geeks For Geeks
            
        
        
             Notes 
  
             Algorithm 
  
             Maths 
  
             Data Structure 
  
             Java 
        
  
        
            Hamburger Menu
  
              

                Click on the icon present 
                at top left corner.
            
  
        
    
      
    
        function gfgMenu() {
            const GFG = document.querySelector('.links');
            if (GFG.classList.contains('d-none')) {
                GFG.classList.remove('d-none');
            }
            else {
                GFG.classList.add('d-none');
            }
        }
    

  

输出：