¿Cómo convertir el ícono de hamburguesa del menú de navegación a X al hacer clic?

El menú de navegación es la sección más importante de un sitio web. Ayuda en la navegación a través del sitio web. Tener una animación adecuada no solo hace que el sitio web se vea bien, sino que también proporciona una interfaz fácil de usar para el cliente. Por lo tanto, esta animación permitirá convertir las tres líneas o el ícono de la hamburguesa, como se le llama frecuentemente, en una X al hacer clic y viceversa. 
El código contendrá 3 estructuras diferentes que permitirán aplicar esta animación. El cuerpo HTML, el cuerpo CSS y el cuerpo JavaScript.
Creando la estructura: En esta sección, crearemos una estructura básica con la ayuda de HTML. También agregaremos el enlace font-awesome para generar las líneas para crear el ícono de la hamburguesa.
 

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>

Diseño de la estructura: En el apartado anterior hemos creado la estructura básica del icono de la hamburguesa. En esta sección, diseñaremos la estructura con la ayuda de 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>

Agregando JavaScript: En esta sección, agregaremos el javascript que es necesario para animar las tres líneas del ícono de la hamburguesa. Agrega un EventListener al icono. Este EventListener alterna el menú que se mostrará al hacer clic y debe ocultarse al hacer clic. Determina el estado del botón de menú, ya sea el estado X o el estado de hamburguesa.
 

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>

Solución final: la solución final es la combinación de los códigos HTML, CSS y JavaScript para obtener el resultado de animación deseado.
 

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>

Producción: 
 

Publicación traducida automáticamente

Artículo escrito por YashGandhi5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *