16 menús en cascada en CSS para renovar tu sitio web

Menús en cascada o dropdown son esenciales para casi cualquier tipo de web. Sobre todo aquellas que necesita la introducción de datos por parte del visitante, como puede ser algo tan simple como elegir el género o seleccionar de qué color será la camiseta que está a punto de adquirir en nuestro eCommerce.

Los menús en cascada son otros de los elementos que podemos actualizar en nuestra web para seguir los estándares del diseño web actual. Ese toque y esa sutileza que sumará más calidad a todo el entorno web que hayamos preparado para nuestro sitio web. Os presentamos 16 menús en cascada en CSS que os vendrán muy bien para renovar vuestro sitio web. Recordamos que también contarán algunos con un poco de JavaScript, y sin olvidarnos de ese HTML necesario también.

Menú de cascada

Este menú de cascada o dropdown consta de HTML, CSS y JavaScript. Aunque el código de JavaScript es bien corto. Sigue el estándar actual de Material Design como lenguaje de diseño para incorporar una animación de cascada simple y sencilla de llamativa presencia. Al abrir las distintos opciones del menú, existe un efecto gráfico hover cuando dejemos el puntero del ratón sobre ellas.

Menú dropdown con jQuery

Este menú de cascada es bastante sencillo, pero es muy elegante en el diseño. También tiene un hover para acentuar el tono azul de cada menú y una animación en cascada sin muchos alardes. Está hecho con HTML, CSS y JavaScript (jQuery).

Menú de cascada de estilo

Este menú dropdown en HTML, CSS y JavaScript está inspirado en una de las webs mejor diseñadas: Stripe (el servicio digital de tarjetas). No existe hover sobre los menús, pero una animación excelentemente diseñada para dejar bien claro las intenciones que tenemos sobre el diseño de nuestro sitio web. Imprescindible por su calidad y perfecto para renovar los menús de tu web.

Menú de cascada animado

Este menú dropdown trata de mostrar el uso de la animación retardada de cada uno de los elementos que surgen al dejar el puntero del ratón en cada menú. Con unas décimas de retraso se logra ese efecto de retardo que le da un toque bien especial.

Efectos de menú dropdown

Como si estuvieran cayendo una serie de cartas de una baraja, la animación de este menú de cascada es bien especial por ello. Un efecto de cascada excelente y que es puro CSS. Ya sabes lo que has de hacer para implementarlo en tu sitio.

Animación de cascada en menú

Un menú dropdown llamativo por las animaciones y por ese color azul que sobresale. Con un fade out e in transita la animación que hace surgir las distintas secciones del menú. Fabricado en HTML, CSS y JavaScript.

Con un poco de jQuery: Menú de cascada

Un menú dropdown personalizado y bien escueto al que no le falta ningún tipo de detalle. Quizás su simpleza sea su mejor y peor punto. Dependerá de lo que necesites para tu sitio web y tus aspiraciones. Bastante CSS y un poco de JavaScript.

Elegante menú de cascada

Si en el anterior echamos de menos algo de animación y un mejor diseño, este menú dropdown tiene de todo para estar fabricado en CSS y JavaScript. Llamativa la animación y el efecto de sombreado en naranja cada vez que dejamos el puntero del ratón sobre cada una de las secciones. De los mejores de la lista.

Menú dropdown en CSS

Un menú de cascada minimalista y que está diseñado puramente en CSS. Animación simple, pero bien llevada a cabo para no sobresalir. Un menú que pasa desapercibido y que sigue los estándares de diseño actuales.

Menú dropdown

Este menú puro CSS de cascada es otro bien distinguido por la animación que se produce cada vez que pulsamos sobre algún menú. La animación desliza la ventana desde el lado derecho con un timing perfecto. Otro de los más interesantes de toda la lista.

Menú simple de cascada

Este menú es simple en origen y consta de HTML y CSS. Es otro de esos menús que nos permiten actualizar ese elemento tan importante de nuestra web y que no dé mucho el cante. Creo que se entiende bien lo que queremos decir con ello.

Navegación horizontal en menú

Aunque esté ya por cumplir sus 4 años, este menú de cascada superpone al que se encuentre justo al lado con una forma bastante creativa. Si buscas algo distinto es otro de los que puedes seleccionar de la lista.

Menú dropdown en CSS

Otro menú puramente en CSS y que es bastante colorido, al menos en la personalización dada en el ejemplo. Con colores planos, la animación revela un efecto de persiana que deja caer las distintas secciones del menú elegido. Otro de los menús de cascada curiosos de la lista y que tiene una temática bien elegida.

Menú de cascada con poco JS

Este menú dropdown usa muy poco JavaScript, el suficiente para cerrar el menú cuando pasamos a otra cosa de forma automática. Está bien logrado el timing en el efecto de la animación para convertirse en uno de los mejores en este sentido.

Otro menú en cascada puro CSS

Un menú en cascada con animaciones en las que apenas hay un retraso de milésimas de segundo. Por lo que produce el efecto de inmediatez en el visitante. Efecto hover y un menú dropdown interesante sin muchos alardes a nivel general.

Menú en cascada concepto zig zag

Si buscas un menú distinto de toda la lista de esta entrada, este menú dropdown tiene todo lo que puedes buscar. La animación que produce es en zigzag para ofrecer otro tipo de experiencia un poco experimental. Podría entrar perfectamente en una temática de un videojuego, así que si tuvieras algún tipo de cliente que busque algo distinto, seguramente que es el más apropiado de toda la lista. Sus formas oblicuas y su animación rápida lo dice todo.

Os dejamos con esta serie de menús CSS para vuestro sitio web que tiene un gran número de ellos.

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

Categorías

CSS, Diseño Web

Ilustrador con estudios formados en ESDIP con la diplomatura de tres años de General de Dibujos, Animados y Animación. Apasionado de la ilustración con un propio estilo. Podéis seguirme desde Behance: www.behance.net/Ramirez_M

Deja un comentario

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

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.