How to convert the hamburger icon of navigation menu to X on click ? - GeeksforGeeks

25 Jun, 2021
The navigation menu is the most important section of a website. It helps in navigating through the website. Having a proper animation not only makes the website look good but also provides a user-friendly interface to the customer. Hence, this animation will make it possible to convert the three lines or the hamburger icon as it is frequently called, into an X upon click and vice versa. The code will contain 3 different structures which will make it possible to apply this animation. The HTML body, CSS body, and JavaScript body.Creating the structure: In this section, we will create a basic structure with the help of HTML. We will also add the font-awesome link to generate the lines to create the hamburger icon. 
HTML
<!DOCTYPE html><html> <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width" />     <meta http-equiv="X-UA-Compatible"            content="ie=edge" />     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />     <title>        Converting the hamburger        icon to X and vice versa    </title></head> <body id="bg-img">    <header>        <div class="menu-btn">            <div class="btn-line"></div>            <div class="btn-line"></div>            <div class="btn-line"></div>        </div>         <nav class="menu">            <div class="menu-branding">                <div class="portrait">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                        alt="" />                </div>            </div>             <ul class="menu-nav">                <li class="nav-item current">                    <a href="#" class="nav-link">                        HOME</a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        ABOUT ME</a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        MY WORK</a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        CONTACT ME</a>                </li>            </ul>        </nav>    </header></body> </html>
Designing the structure: In the previous section, we have created the basic structure of the hamburger icon. In this section, we will design the structure with the help of CSS. 
css
<style>    /* 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;    }</style>
Adding JavaScript: In this section, we will add the javascript which is necessary for us to animate all the three lines of the hamburger icon. It adds an EventListener to the icon. This EventListener toggles the menu that is to be displayed upon click and needs to be hidden upon click. It determines the state of the menu button, whether it is X state or the hamburger state. 
javascript
<script>    // 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;        }    }</script>
Final solution: The final solution is the combination of the HTML, CSS, and the JavaScript codes to get the desired animation result. 
html
<!DOCTYPE html><html> <head>    <meta charset="UTF-8" />    <meta name="viewport" content=            "width=device-width" />     <meta http-equiv="X-UA-Compatible"            content="ie=edge" />     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />     <title>        Converting the hamburger icon        to X and vice versa    </title>         <style>        /* 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;        }    </style></head> <body id="bg-img">    <header>        <div class="menu-btn">            <div class="btn-line"></div>            <div class="btn-line"></div>            <div class="btn-line"></div>        </div>         <nav class="menu">            <div class="menu-branding">                <div class="portrait">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                        alt="" />                </div>            </div>             <ul class="menu-nav">                <li class="nav-item current">                    <a href="#" class="nav-link">                        HOME                    </a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        ABOUT ME                    </a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        MY WORK                    </a>                </li>                 <li class="nav-item">                    <a href="#" class="nav-link">                        CONTACT ME                    </a>                </li>            </ul>        </nav>    </header>     <script>        // 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;            }        }    </script></body> </html>
Output:  
 
rajeev0719singh
CSS-Misc
HTML-Misc
JavaScript-Misc
Bootstrap
CSS
HTML
JavaScript
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
Difference between Bootstrap 4 and Bootstrap 5
How to Use Bootstrap with React?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)