🥇 ▷ Más de 10 ejemplos de menú de hamburguesas [CSS Only]

En el menú de hoy están las hamburguesas CSS. Una forma receptiva de mostrar un menú fuera del lienzo, usando solo HTML y CSS.

Cada sitio web debe ser receptivo si quiere tener éxito. Tener un menú compatible con dispositivos móviles es vital para atraer a todos los públicos y dispositivos. Esto es algo que aprenderemos en este artículo sobre cómo Menús de hamburguesas adaptables a CSS poder ayudar.

Un menú de hamburguesa es una forma de mostrar enlaces de navegación en un sitio web, generalmente para dispositivos móviles y pantallas más pequeñas. Sin embargo, los menús de hamburguesas CSS también se pueden usar para sitios web de escritorio. Una vez que haga clic en el icono de “hamburguesa”, aparecerá un menú deslizante, que se mostrará en la parte superior del contenido principal.

También se usan cuando tiene demasiados botones y enlaces en la barra de navegación del encabezado. Un menú de hamburguesa receptivo le permite reducir todo esto en un diseño de menú más escalable, creando un menú compacto. Ideal para barras de navegación pegajosas y sitios web de una página.

Como habrás adivinado, se llama menú de hamburguesas porque el ícono parece una hamburguesa apilada 😋

Sabemos de dónde recibe su nombre el menú de hamburguesas, pero no todos los íconos de menú tienen que ser iguales. Hay muchos diseños diferentes y animaciones de íconos para elegir, algunos de los cuales verá en nuestros ejemplos.

Considere los diferentes íconos anteriores, no todos funcionarán para cada diseño de sitio web, pero como puede ver, estos íconos de menú pueden ser bastante creativos. Lo mismo ocurre con sus animaciones.

Ahora que entendemos qué es un menú de hamburguesas CSS y su propósito principal, veamos algunos ejemplos y puede usarlos e inspirarse en ellos.

Si está buscando crear un diseño receptivo, móvil o simplemente incluir más contenido en sus elementos de navegación, un menú de hamburguesas receptivo a CSS es una de las mejores soluciones para elegir.

ver la pluma
en CódigoPen.

Avance

Es bastante común tener menús de hamburguesas para reemplazar los menús horizontales estándar en ventanas pequeñas. De esta forma, el menú se vuelve completamente sensible y proporciona la mejor experiencia según el tamaño de la ventana gráfica.

Si eso es lo que está buscando, este ejemplo hará exactamente eso, y con solo CSS. Para probarlo abrir el codepen en una nueva ventana y cambie el tamaño del panel de resultados.

En el modo de respuesta, el menú de hamburguesas abrirá la lista de elementos uno tras otro en una columna vertical que viene desde la parte superior. Todo un comportamiento estándar para los dispositivos móviles.

ver la pluma
en CódigoPen.

Avance

Este es muy simple pero efectivo, solo usa HTML y CSS para lograr un menú de hamburguesas con algunas animaciones geniales.

El ícono de la hamburguesa en sí mismo, cuando se hace clic en él, se transforma en una cruz y funciona como el botón de cierre. El menú se desliza a la vista y se muestra en el centro con sus enlaces de navegación.

ver la pluma
en CódigoPen.

Avance

Si está buscando un ejemplo más completo de cómo un menú de hamburguesas CSS puede ser útil, este CodePen presenta un sitio web de ejemplo para mostrar el uso del menú de hamburguesas CSS.

Solo usa HTML puro y CSS, por lo que es fácil aprender y comprender lo que está sucediendo. El ícono del menú está animado y se transforma en una cruz cuando el menú está abierto.

El menú en sí se desliza fuera de la diapositiva y se superpone al sitio web principal. Como este diseño responde, ocultará automáticamente el menú del encabezado y hará que el menú de hamburguesas esté disponible una vez que disminuya el ancho de la pantalla.

ver la pluma
en CódigoPen.

Avance

¿Está considerando abrir el elemento del menú en pantalla completa? Entonces te encantará este ejemplo. Una solución solo de CSS para mostrar un menú de hamburguesas y abrirlo en una capa de pantalla completa.

Este tipo de menús de pantalla completa puede ser útil cuando nuestro menú tiene muchos elementos, submenús o información adicional.

ver la pluma
en CódigoPen.

Avance

Si buscas diferentes animaciones para tu icono de menú de hamburguesas, tienes que echar un vistazo a estas.

Está usando una sola línea de JavaScript (o jQuery) para establecer el estado de la hamburguesa. El resto es todo CSS puro.

ver la pluma
en CódigoPen.

Avance

Un menú de hamburguesas CSS muy ágil y elegante que solo usa HTML y CSS para lograrlo.

El menú en sí se desliza rápidamente desde la izquierda y no ocupa toda la pantalla, solo el lado izquierdo. Los elementos del menú también tienen un agradable efecto de desplazamiento. Y si este efecto no es lo suficientemente elegante para usted, puede crear un mejor efecto de desplazamiento inspirándose en estos efectos de desplazamiento del botón CSS.

Bueno para trabajar si está buscando agregar esto a un sitio web existente o si solo desea la estructura básica.

ver la pluma
en CódigoPen.

Avance

La mayoría de los menús de hamburguesas CSS se deslizan desde la izquierda y la derecha o ocupan toda la pantalla. Pero este es un poco diferente porque solo usa la esquina superior izquierda dentro de un menú en forma de burbuja.

Muy singular en comparación con el diseño tradicional del menú de hamburguesas, este ejemplo podría cambiarse fácilmente para editar los colores o agregar una sombra efectiva en el fondo.

Este usa JavaScript pero es muy mínimo: básicamente solo para alternar las clases de CSS para cambiar el estado del menú, abierto o cerrado. Nada complicado. No hay bibliotecas ni dependencias en las que confiar, solo JavaScript puro que es muy básico.

ver la pluma
en CódigoPen.

Avance

La animación es suave y no se siente pegajosa. El menú se desliza desde la izquierda y se coloca encima de cualquier contenido principal detrás.

No requiere ningún JavaScript, solo funciona puramente basado en HTML y CSS, fácil de trabajar o adaptar a su gusto.

El menú en sí será fácil de editar y agregar su propio contenido, simplemente escriba sus propios elementos HTML dentro y el menú se deslizará hacia afuera.

El ícono del menú de hamburguesas también tiene una animación de apertura y cierre suave que solo usa CSS.

ver la pluma
en CódigoPen.

Avance

Con un ícono de menú de hamburguesa CSS flotante dentro de un fondo circular, una vez que se hace clic en el menú, se usa una animación de apertura curricular.

La animación es muy suave y se abre desde el punto del ícono del menú.

Ocupar la pantalla completa sería excelente para los menús de navegación ocupados que requieren mucho espacio con imágenes, íconos y texto.

Solo usa HTML puro y CSS para lograr esto.

ver la pluma
en CódigoPen.

Avance

Un divertido menú de hamburguesa CSS animado que se transforma desde la esquina superior derecha de la pantalla en un menú de pantalla completa.

Solo usando HTML y CSS, la estructura es fácil de seguir y hacer ediciones para agregar su propio contenido y enlaces/estilo de navegación.

ver la pluma
en CódigoPen.

Avance

Deslizándose desde el lado izquierdo de la pantalla, este diseño de menú es más adecuado para una navegación compleja.

Tiene una hermosa animación deslizante, pero el menú en sí usa una lista de elementos muy bien estructurada que puede abarcar múltiples profundidades, útil para categorías internas.

Utiliza HTML y CSS que se generan a partir de SCSS.

Llevar

Hemos visto muchos diseños diferentes para los menús de hamburguesas de CSS, algunos tradicionales, otros un poco diferentes. Con suerte, ha encontrado algo que le gusta de nuestros ejemplos y ha encontrado inspiración para usar uno en su próximo sitio web.

El menú de hamburguesas de CSS tiene una amplia gama de usos: desde diseño receptivo, experiencias interactivas con íconos de menú flotantes y brindarle más espacio con un menú fuera del lienzo.

En general, los menús de hamburguesas receptivos a CSS son una excelente manera de hacer que el diseño de su sitio web sea receptivo y se reduzca a pantallas más pequeñas en dispositivos móviles. Es una manera fácil de hacer que la sección de navegación de su encabezado responda y se adapte a diferentes tamaños de pantalla.