Cómo hacer un menu hamburguesa en HTML y CSS

Cómo hacer un menu hamburguesa en HTML y CSS
Índice
  1. Introducción a los menús hamburguesa
    1. Requisitos previos
  2. Crear el menú hamburguesa en HTML
    1. Explicación del código
    2. Dar estilo con CSS al menú hamburguesa
    3. Explicación del código CSS
  3. Agregar funcionalidad al menú hamburguesa con JavaScript
    1. Añadir estilos al menú en pantalla completa
  4. Comentarios finales

Una de las tendencias más populares en diseño web en la actualidad es el uso del menú hamburguesa. ¿Pero qué es exactamente un menú hamburguesa en un sitio web?

Se trata de un tipo de menú que permite guardar opciones de navegación en un solo botón, generando una experiencia más limpia y concisa para el usuario.

Este tipo de menús se ha popularizado gracias a su fácil implementación en código HTML y CSS. En este artículo, te explicaremos paso a paso cómo crear un menú hamburguesa para tu página web.

Introducción a los menús hamburguesa

 

Los menús hamburguesa reciben su nombre debido a su similitud con una hamburguesa, con los ingredientes escondidos en el pan de arriba. En este caso, los ingredientes son las opciones de navegación que se despliegan al hacer clic en el botón.

Este tipo de menús se han convertido en una tendencia en diseño de páginas web gracias a su simplicidad y su capacidad para guardar espacio en la pantalla, algo muy importante en la era de los dispositivos móviles.

Cómo crear un archivo HTML en notepadCómo crear un archivo HTML en notepad

Requisitos previos

Antes de comenzar a crear el menú hamburguesa, es importante tener ciertos conocimientos básicos en HTML y CSS. Si no los tienes, te recomendamos revisar tutoriales y cursos en línea para familiarizarte con el lenguaje y la estructura del código.

También necesitarás un editor de texto simple, como Notepad o Sublime Text. Si ya tienes un software de edición web como Dreamweaver, también puedes usarlo para seguir los pasos de este artículo.

Crear el menú hamburguesa en HTML

 

Para crear el menú hamburguesa en HTML, necesitaremos tener una estructura básica de página web que incluya los elementos necesarios para el menú. Aquí te mostramos un ejemplo de código HTML que puedes utilizar:

 

<nav>

    <div class="logo">

        // Aquí puedes insertar tu logo o imagen

    </div>

    <div class="menu-btn">

        <div class="btn-line"></div>

        <div class="btn-line"></div>

        <div class="btn-line"></div>

    </div>

    <div class="menu">

        <ul>

            <li><a href="#">Inicio</a></li>

            <li><a href="#">Acerca de</a></li>

            <li><a href="#">Servicios</a></li>

            <li><a href="#">Contacto</a></li>

        </ul>

    </div>

</nav>

Explicación del código

En este código, se crea un elemento `nav`, que indica que se trata de una barra de navegación. Dentro de este elemento, se encuentran tres `div`: uno para el logo o imagen de tu página web, otro para el botón del menú hamburguesa y el último para el menú en sí.

Cómo crear un aviso de Cookies para mi web en HTMLCómo crear un aviso de Cookies para mi web en HTML

Dentro del `div` del botón del menú, hay tres elementos `div` más, cada uno con la clase "btn-line". Estos elementos serán los que conformen las tres líneas horizontales características de los menús hamburguesa.

Dentro del `div` del menú, se encuentra una lista desordenada (`ul`) con cuatro elementos `li`, cada uno con un enlace (`a`) a una página o sección de tu página web. Puedes modificar estos elementos según las necesidades de tu página.

Dar estilo con CSS al menú hamburguesa

Una vez que tenemos la estructura básica del menú en HTML, es hora de aplicarle estilos con CSS para lograr el efecto hamburguesa.

/* Estilo para el botón hamburguesa */

.menu-btn {

    display: flex;

    flex-direction: column;

    cursor: pointer;

    margin-right: 20px;

}

 

/* Estilo para las lineas horizontales del botón */

.btn-line {

    width: 25px;

    height: 3px;

    background: #000;

    margin: 5px;

}




/* Estilo para el menú */

.menu {

    display: none; /* Por defecto, el menú se mantendrá oculto */

}




/* Estilo para el menú cuando se muestra en pantallas más grandes */

nav ul li {

    display: inline-block;

}




/* Estilo para los enlaces en el menú */

nav ul li a {

    display: block;

    color: #000;

    text-decoration: none;

    padding: 10px;

}

Explicación del código CSS

En este código, utilizamos el elemento `nav` para aplicar estilos al menú. En el selector `.menu-btn`, le indicamos que sea un elemento flexible en dirección de columna, lo que permitirá que las líneas del botón hamburguesa se apilen una encima de la otra. También le damos un cursor de tipo pointer para indicar que es un elemento clickeable.

Luego, en el selector `.btn-line`, le damos los estilos necesarios para que se vean como tres líneas horizontales. Recuerda que puedes cambiar los valores de `width`, `height` y `background` según tus preferencias.

Cómo hacer un boton de borrar en HTMLCómo hacer un boton de borrar en HTML

Para el selector `.menu`, le indicamos que por defecto se mantenga oculto con la propiedad `display: none`. Luego, en el selector `nav ul li`, le decimos que los elementos de la lista se muestren en línea y, finalmente, en el selector `nav ul li a`, le damos estilos a los enlaces del menú, como color, decoración de texto y padding.

Agregar funcionalidad al menú hamburguesa con JavaScript

En este punto, ya tenemos el menú con su estructura y estilos, pero todavía necesitamos agregar la funcionalidad para que se muestre y oculte al hacer clic en el botón hamburguesa. Para esto, utilizaremos JavaScript.

/* Función para mostrar y ocultar el menú */

document.querySelector('.menu-btn').addEventListener('click', () => {

    document.querySelector('.menu').classList.toggle('active')

    // Al hacer clic en el botón, se agrega o remueve la clase "active" al menú

});

Con estas pocas líneas de código, creamos una función que se activará con un evento click en el botón del menú. Dentro de la función, utilizamos `document.querySelector()` para seleccionar el elemento con la clase `.menu` y le agregamos o removemos la clase `.active`, que contiene los estilos para mostrar el menú.

Añadir estilos al menú en pantalla completa

En pantallas más grandes, no tendremos la necesidad de utilizar el menú hamburguesa, por lo que podemos agregar estilos específicos para mostrar el menú en la barra de navegación. Para esto, podemos utilizar media queries en CSS.

/* Estilo para mostrar el menú en pantallas más grandes */

@media screen and (min-width: 600px) { /* Puedes modificar el valor para adaptarlo a tus necesidades */




    .menu {

        display: flex !important; /* Se utiliza !important para sobreescribir el display "none" */

        justify-content: flex-end;

    }




    /* Se oculta el botón del menú en pantallas más grandes */

    .menu-btn {

        display: none;

    }




    /* Se muestra el logo en la barra de navegación */

    .menu .logo {

        float: left;

    }




}

En este código, utilizamos una media query con un valor de ancho mínimo de 600px para indicar que se apliquen estos estilos solo en pantallas más grandes. Utilizamos `dislay: flex` para que el menú se muestre en forma de fila y `justify-content` para alinearlo a la derecha.

También es importante agregar `!important` en el selector `.menu` para sobreescribir el `display: none` que teníamos previamente en la hoja de estilos.

Saltos de linea en htmlSaltos de linea en html

En el selector `.menu-btn`, simplemente indicamos que se oculte en pantallas más grandes para no tener el botón del menú a la vista.

Finalmente, en el selector `.menu .logo`, le damos estilos al logo o imagen que queramos mostrar en la barra de navegación.

Comentarios finales

En resumen, el uso de menús hamburguesa en páginas web se ha convertido en una tendencia por su capacidad de ahorrar espacio y por su diseño minimalista y práctico.

Siguiendo estos pasos, podrás implementarlo fácilmente en tu página web utilizando HTML, CSS y JavaScript. No olvides probar los estilos y adaptarlos a tu diseño y necesidades específicas. ¡Esperamos que este artículo te haya sido útil para crear tu propio menú hamburguesa en tu página web!

Deja una respuesta

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

Subir