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

导航菜单是网站最重要的部分。它有助于浏览网站。拥有适当的动画不仅可以使网站看起来不错，而且还为客户提供了一个用户友好的界面。因此，此动画可以在点击时将三行或经常调用的汉堡包图标转换为 X，反之亦然。
代码将包含 3 种不同的结构，这将使应用此动画成为可能。 HTML 主体、CSS 主体和 JavaScript 主体。
创建结构：在本节中，我们将在 HTML 的帮助下创建一个基本结构。我们还将添加 font-awesome 链接以生成用于创建汉堡包图标的线条。

HTML

 

    
    
 
    
 
    
 
    

 

    

        

            

            

            

        
 
        

            

                

                    
                
            
 
            

                

                    
                        HOME
                
 
                

                    
                        ABOUT ME
                
 
                

                    
                        MY WORK
                
 
                

                    
                        CONTACT ME
                
            
        
    

 

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

css

添加 JavaScript：在本节中，我们将添加为汉堡包图标的所有三行设置动画所必需的 javascript。它向图标添加了一个 EventListener。此 EventListener 切换将在单击时显示并需要在单击时隐藏的菜单。它决定了菜单按钮的状态，是X状态还是汉堡状态。

javascript

    // 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 代码来获得所需的动画效果。

html

 

    
    
 
    
 
    
 
    
        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 transform 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;
            }
        }
    

 

输出：