如何在单击时将导航菜单的汉堡图标转换为X？

导航菜单是网站上最重要的部分。它有助于浏览网站。拥有适当的动画不仅可以使网站看起来不错，而且可以为客户提供用户友好的界面。因此，该动画将使得可以将三行或经常被调用的汉堡图标转换为单击时的X，反之亦然。

该代码将包含3个不同的结构，这将使应用此动画成为可能。 HTML主体，CSS主体和JavaScript主体。

创建结构：在本节中，我们将借助HTML创建一个基本结构。我们还将添加font-awesome链接以生成用于创建汉堡包图标的行。

  

    
    
  
    
  
    
  
    

  

    

        

            

            

            

        
  
        

            

                

                    
                
            
  
            

                

                    
                        HOME
                
  
                

                    
                        ABOUT ME
                
  
                

                    
                        MY WORK
                
  
                

                    
                        CONTACT ME
                
            
        
    

  

设计结构：在上一节中，我们创建了汉堡图标的基本结构。在本节中，我们将在CSS的帮助下设计结构。

添加JavaScript：在本部分中，我们将添加对hamburger icon的所有三行进行动画处理所必需的javascript。它将EventListener添加到图标。此EventListener切换在单击时将显示的菜单，并且在单击时需要隐藏。它确定菜单按钮的状态，是X状态还是汉堡状态。

    // select dom items
    const menuBtn = 
        document.querySelector(".menu-btn");
  
    const menu = 
        document.querySelector(".menu");
  
    const menuNav = 
        document.querySelector(".menu-nav");
  
    const menuBranding = 
        document.querySelector(".menu-branding");
  
    const navItems = 
        document.querySelectorAll(".nav-item");
  
    // Set the initial state of the menu
    let showMenu = false;
  
    menuBtn.addEventListener("click", toggleMenu);
  
    function toggleMenu() {
        if (!showMenu) {
            menuBtn.classList.add("close");
            menu.classList.add("show");
            menuNav.classList.add("show");
            menuBranding.classList.add("show");
            navItems.forEach((item) =>
                item.classList.add("show"));
  
            // Reset the menu state
            showMenu = true;
        } else {
            menuBtn.classList.remove("close");
            menu.classList.remove("show");
            menuNav.classList.remove("show");
            menuBranding.classList.remove("show");
            navItems.forEach((item) =>
                item.classList.remove("show"));
  
            // Reset the menu state
            showMenu = false;
        }
    }

最终解决方案：最终解决方案是HTML，CSS和JavaScript代码的组合，以获得所需的动画效果。

  

    
    
  
    
  
    
  
    
        Converting the hamburger icon
        to X and vice versa
    
      
    
        /* Styling the menu button */
        .menu-btn {
            position: absolute;
            z-index: 3;
            right: 35px;
            top: 35px;
            cursor: pointer;
            transition: all 0.5s ease-out;
        }
  
        /* Styling the hamburger lines */
        .menu-btn .btn-line {
            width: 28px;
            height: 3px;
            margin: 0 0 5px 0;
            background: black;
            transition: all 0.5s ease-out;
        }
  
        /* Adding tranform to the X */
        .menu-btn.close {
            transform: rotate(180deg);
        }
  
        /* Styling the three lines to make it an X */
        .menu-btn.close .btn-line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
  
        .menu-btn.close .btn-line:nth-child(2) {
            opacity: 0;
        }
  
        .menu-btn.close .btn-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }
  
        /* Styling the position of the menu icon */
        .menu {
            position: fixed;
            top: 0;
            width: 100%;
            opacity: 0.9;
            visibility: hidden;
        }
  
        .menu.show {
            visibility: visible;
        }
  
        /* Adding a transition delay 
          to the 4 items in the 
          navigation menu */
        .nav-item:nth-child(1) {
            transition-delay: 0.1s;
        }
  
        .nav-item:nth-child(2) {
            transition-delay: 0.2s;
        }
  
        .nav-item:nth-child(3) {
            transition-delay: 0.3s;
        }
  
        .nav-item:nth-child(4) {
            transition-delay: 0.4s;
        }
    

  

    
        
            
            
            
        
  
        
            
                
                    
                
            
  
            
                
                    
                        HOME
                    
                
  
                
                    
                        ABOUT ME
                    
                
  
                
                    
                        MY WORK
                    
                
  
                
                    
                        CONTACT ME
                    
                
            
        
    
  
    
        // Select dom items
        const menuBtn = 
            document.querySelector(".menu-btn");
  
        const menu = 
            document.querySelector(".menu");
  
        const menuNav = 
            document.querySelector(".menu-nav");
  
        const menuBranding = 
            document.querySelector(".menu-branding");
  
        const navItems = 
            document.querySelectorAll(".nav-item");
  
        // Set the initial state of the menu
        let showMenu = false;
  
        menuBtn.addEventListener("click", toggleMenu);
  
        function toggleMenu() {
            if (!showMenu) {
                menuBtn.classList.add("close");
                menu.classList.add("show");
                menuNav.classList.add("show");
                menuBranding.classList.add("show");
                navItems.forEach((item) =>
                    item.classList.add("show"));
  
                // Reset the menu state
                showMenu = true;
            } else {
                menuBtn.classList.remove("close");
                menu.classList.remove("show");
                menuNav.classList.remove("show");
                menuBranding.classList.remove("show");
                navItems.forEach((item) =>
                    item.classList.remove("show"));
  
                // Reset the menu state
                showMenu = false;
            }
        }
    

  

输出：