使用 HTML、CSS 和 JavaScript 创建移动切换导航菜单

要创建移动切换导航菜单，您需要 HTML、CSS 和 JavaScript。如果你想在菜单中附加图标，那么你需要一个字体很棒的 CDN 链接。本文分为创建结构和设计结构两部分。

完整导航一瞥：

创建结构：在本节中，我们将创建一个基本的站点结构，并为将用作菜单图标的图标附加 Font-Awesome 的 CDN 链接。

• Font Awesome 中图标的 CDN 链接：

• 用于制作结构的 HTML 代码：

  
  
    
  
      
      
  
    
  
    
      
  
    
          
          
  
              GeeksforGeeks
              
  
                  Language
                  Practice
                  Interview
                  Puzzle
    
              
                
              
              
                 
                 
              
          
      
  
    
  
  

设计结构：在上一节中，我们已经创建了基本网站的结构，我们将在其中使用菜单图标。在本节中，我们将设计导航栏的结构。

结构的CSS代码：

动画菜单的 JavaScript 代码：

    
    // Function to toggle the bar
    function geeksforgeeks() {
        var x = document.getElementById("menus");
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }

 

    
    // Function to toggle the plus menu into minus
    function myFunction(x) {
        x.classList.toggle("fa-minus-circle");
    }

组合 HTML、CSS 和 JavaScript 代码：这是组合上述部分后的最终代码。它将移动导航动画菜单。
例子：

  

    Mobile Navigation Bar
    
    
  
    
        
        /* Navigation bar styling */
        .menu-list {
            max-width: 300px;
            margin: auto;
            height: 500px;
            color: white;
            background-color: green;
            border-radius: 10px;
        }
        
        /* logo, navigation menu styling */
        .geeks {
            overflow: hidden;
            background-color: #111;
            position: relative;
        }
        
        /* stylinf navigation menu */
        .geeks #menus {
            display: none;
        }
        
        /* link specifi styling */
        .geeks a {
            text-decoration: none;
            color: white;
            padding: 14px 16px;
            font-size: 16px;
            display: block;
        }
        
        /* navigation toggle menu styling */
        .geeks a.icon {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
        }
        
        /* hover effect on navigation logo and menu */
        .geeks a:hover {
            background-color: #ddd;
            color: black;
        }
    

  

  
    
  
        
        
            GeeksforGeeks
            
                Language
                Practice
                Interview
                Puzzle
  
            
  
            
            
  
                
                
            
        
    
  
    
        
        // Function to toggle the bar
        function geeksforgeeks() {
            var x = document.getElementById("menus");
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
        }
    
  
    
        
        // Function to toggle the plus menu into minus
        function myFunction(x) {
            x.classList.toggle("fa-minus-circle");
        }
    

  

输出：