Menú Hamburguesa Animado con CSS

Antes de empezar a explicar el código de este tutorial voy a hacer una breve introducción para poder responder la interrogante ¿Cómo hacer un menú hamburguesa  animado con CSS y JS?

Bien un menú hamburguesa no es más que un menú de navegación típico para páginas web con la particularidad de poseer como característica muy notoria el hecho de tener el diseño de icono de apertura y cierre de los ítems de menú en forma de hamburguesa, es decir tres rayas sobrepuestas unos encima de otra y que de acuerdo a la interacción del usuario puede visualizar o no algunos elementos del menú 

Simplemente aplicamos Flexbox para distribuir los elementos del menú en forma horizontal y para distribuir los elementos  de la hamburguesa en forma vertical

Para que sea responsive usamos los mediasqueris que permiten adaptar los elementos html del menú a un determinado tamaño de pantallla para este caso pues la pantalla de un dispositivo móvil.

Un tercer punto importante a tener en cuenta es la interactividad que debe tener el icono de hamburguesa. Es decir debe escuchar el evento onclick donde se hará la gestión de visualizar o no los ítems del menú de forma vertical y centrada, además de cambiar el diseño del icono hamburguesa; y en este caso vamos a emplear una función nativa de JavaScript Vainilla llamada toggle.

Veamos la maquetación Html

<nav class="navbar">
            <div class="nav_logo">LOGO</div>
            <div class="nav_items" id="_items">
                <a href="/">INICIO</a>
                <a href="/bio">BIO</a>
                <a href="/portafolio">PORTAFOLIO</a>
                <a href="/contacto">CONTACTO</a>
        </div>
            <div class="nav_toggle" id="_toggle">
                <span></span>
                <span></span>
                <span></span>
        </div>

Ahora el diseño con los estilos CSS

        body{
                margin: 0; 
                font-family: Arial, Helvetica, sans-serif;
        }
        .navbar{
                background:#ff8d01;
                height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;
        } 
        .nav_logo{
                font-weight: bold;
                font-size: 20px;
                margin: 15px;
                color: white;
        }
        .nav_items a{
                margin: 15px;
                color: white;
                position: relative;
                text-decoration: none;
        }
        .nav_items a::before{
                content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: rgb(255, 151, 5);
            transition: all 0.5s;
        }
        .nav_items a:hover::before{
                width: 100% !important;
        }
        .nav_toggle{
                display: none;
        }
        @media (max-width: 768px) {
                .nav_items{
                    position: absolute;
                    top: 60px;
                    left: 0;
                    background: orange;
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: -webkit-fill-available;
                    transform: translateX(-100%);
                    transition: 0.3s ease all;
            }
            .nav_items a{ text-align: center;}
            .nav_toggle{
                    display: flex !important;
                    flex-direction: column;                
                    margin: 15px;
            }
            .nav_toggle span{
                    width: 30px;
                    height: 4px;
                    background: white;
                    margin-bottom: 5px;
                    border-radius: 2px;             
                    transform-origin: 5px 0px;
                    transition: all 0.2s linear;
            }
            .close span{
                    transform: rotate(45deg) translate(0px, 0px);
            }
            .close span:nth-child(2){
                    display: none;
            }
            .close span:nth-child(3){
                    transform: rotate(-45deg) translate(-5px, 1px);
            }
            .open{ transform: translateX(0) !important}
        }

Como tercer punto la interactividad con tres líneas de JavaScript 

_toggle.onclick = () =>{
            _items.classList.toggle("open")
        _toggle.classList.toggle("close")
    }

Finalmente concluimos

Que un menú debe ser interactivo para que facilite la experiencia de usuario y que mejor que integres un menú de hamburguesa de forma sencilla y rápida sin usar librerías adicionales

Leido 7134 veces | 12 usuarios