Hay un elemento que encontrará en casi todos los sitios web o aplicaciones web de una forma u otra. Y ese es el Efecto desplegable o “elemento”por lo general comparte su nombre con el Elemento de selección HTMLtambién conocido como seleccionar etiqueta o cuadro de selección.
El elemento select es una etiqueta HTML que nos permite seleccionar una o varias opciones, normalmente en formularios.
Mientras que la Efecto desplegable o “elemento” también puede hacer referencia al efecto visual que nos permite navegar por los submenús en encabezados, barras laterales u otro tipo de elementos de menú.
En este artÃculo, nos centraremos en ambos. Estos son simples y fáciles de integrar en su diseño, con HTML puro, CSS y algo de JavaScript.
ver la pluma
en CódigoPen.
He aquà un gran ejemplo de lo que es un menú desplegable sencillo parece.
El código JavaScript es súper simple Simplemente vincula el evento de clic al elemento visible principal, por lo que una vez que se hace clic, mostrará el submenú.
Una forma muy simple pero efectiva de crear un menú plegable súper simple.
ver la pluma
en CódigoPen.
Aquà hay un elemento de cuadro de selección personalizado hecho de HTML, CSS y JavaScript puro.
Este tipo de menú desplegable imita el comportamiento de una entrada HTML Select al permitir que los usuarios seleccionen una sola opción.
El estilo personalizado hace que se vea minimalista y limpio. Utiliza colores blanco y azul y un uso sutil de las sombras para evitar el uso de bordes marcados.
ver la pluma
en CódigoPen.
Una hermosa lista de 8 menús desplegables diferentes con diferentes estilos.
Cuatro de ellos reaccionan al hacer clic mientras que los otros 4 lo hacen al pasar el mouse.
Todos los elementos desplegables están integrados con Javascript Vanilla puro y no requieren una biblioteca de proveedores externos.
ver la pluma
en CódigoPen.
Un gran ejemplo de un menú desplegable con múltiples submenús.
Este menú desplegable mostrará los elementos principales al pasar el mouse sobre él. Y, además de eso, lo bueno de este menú es que le brinda una forma de agregar submenús dentro de los elementos de la lista.
Una gran solución a un problema muy común que enfrentan los desarrolladores al diseñar encabezados de menú.
ver la pluma
en CódigoPen.
Este es un hermoso menú plegable para un elemento de la barra lateral. Ideal para menús que contienen elementos agrupados en diferentes categorÃas.
El menú utiliza encabezados de grupo que alternan los elementos contraÃbles en el submenú al hacer clic en ellos.
Puede ser una muy buena opción para menús laterales grandes con muchas opciones. Ayuda a limitar las opciones para el visitante.
ver la pluma
en CódigoPen.
Un magnÃfico ejemplo de un submenú que muestra un menú desplegable con Ãconos de redes sociales.
Agregar imágenes o Ãconos suele ser una excelente manera de mejorar la experiencia del usuario en cualquier sitio web. Hace que sea mucho más rápido para los usuarios visualizar los elementos y seleccionar el que necesitan.
Este menú desplegable no utiliza ninguna biblioteca externa, lo que lo hace ideal para aquellos que no quieren depender de ningún marco en particular.
8. Menú desplegable de JavaScript de Alpine
ver la pluma
en CódigoPen.
Si usa el marco Alpine.js, este cuadro de selección podrÃa ser para usted.
Este es un ejemplo básico de cómo integrar un cuadro de selección HTML con lógica JavaScript utilizando Alpine.js.
También usa TailwindCSS para diseñar. (Lo cual, puede que no sea ideal para todos, pero tiene una solución simple)
ver la pluma
en CódigoPen.
Si está buscando un menú desplegable que funcione como un menú contextual para su aplicación web, este ejemplo es para usted.
Un menú bellamente implementado que admite Ãconos, categorÃas de agrupación y submenús dentro del menú.
Utiliza React y la biblioteca de proveedores Popper.js.
ver la pluma
en CódigoPen.
Si Bootstrap es lo tuyo, entonces deberÃas considerar usar este menú.
Este menú desplegable de arranque es perfecto para los botones que brindan a los usuarios múltiples acciones para elegir.
Admite agrupar categorÃas y alternar interruptores en la lista.
ver la pluma
en CódigoPen.
Si usar jQuery está bien para ti, ¡mira esta belleza!
Este es un gran ejemplo de cómo un menú desplegable puede contener, no solo una lista de elementos, sino también texto o imágenes.
Este ejemplo muestra cómo puede configurar este menú desplegable para que se muestre al pasar el mouse y al hacer clic, alineado a la izquierda o a la derecha, en la parte superior o inferior.
El cuadro de selección utiliza un estilo muy simple que lo hace ideal para sitios web minimalistas y de temática blanca.
ver la pluma
en CódigoPen.
Este ejemplo es una obra de arte.
No solo tenemos un menú receptivo, sino también un menú desplegable receptivo menú en el que se ha tenido en cuenta cada detalle.
En el escritorio, los submenús se mostrarán al pasar el mouse por encima. En receptivo, al hacer clic.
Personalmente, me encanta el efecto que tiene el menú en el escritorio y la simplicidad que tiene en el modo receptivo. ¡Lo que lo hace perfecto para todo tipo de dispositivos!
ver la pluma
en CódigoPen.
Aquà hay otro ejemplo de un menú desplegable de jQuerypero esta vez, imitando el comportamiento de un cuadro de selección HTML.
Debido a que el menú desplegable usa jQuery, también le permite recuperar el valor seleccionado del cuadro de selección en JavaScript. De esta manera, puede utilizarlo en su lógica.
ver la pluma
en CódigoPen.
Este es un menú desplegable CSS puro que no involucrará ningún JavaScript.
Quizás no sea lo que estabas buscando, pero definitivamente, algo a considerar si estás buscando un menú de barra lateral.
El menú incluye categorÃas, iconos para ellas y flechas que indican el estado del submenú.
Conclusión
Si tiene una página web, es probable que deba incluir algún tipo de efecto desplegable o seleccionar un elemento en ella. Y si usa JavaScript, es muy probable que desee enlazarlo con su lógica de JavaScript.
En este artÃculo, le mostramos lo que creemos que son hermosos menús desplegables. Menús que fácilmente podrás integrar con su código JavaScript. Puede usar React, Vue, Angular o JavaScript simple y puro.
Algunos, como los efectos desplegables para encabezados y menús, no requerirán mucha lógica desde el punto de vista de JavaScript, mientras que otros usan la entrada de selección HTML
servirá.
Para usarlos, simplemente elige el menú desplegable que más te guste y copia el código para aplicarlo a tu sitio web.
ArtÃculos relacionados
