Menú Desplegable

Reúne contenido, acciones y selección de opciones.

Los menús desplegables son una forma efectiva y eficiente de mostrar opciones en una interfaz de usuario, especialmente cuando hay una gran cantidad de opciones o espacio limitado disponible. Sus funciones principales son seleccionar una opción o también desencadenar una acción.

Un menú desplegable influye en la agrupación de opciones, el ahorro de espacio, la navegación y acceso rápido, la organización jerárquica, la personalización y configuración, la interacción y accesibilidad, y por supuesto el cierre automático de lo desplegado.

La funcionalidad de un menú desplegable en la interfaz de usuario se puede resumir de la siguiente manera:

  • Agrupación: La principal función de un menú desplegable es agrupar opciones relacionadas en una lista compacta y desplegable. Esto permite mostrar una gran cantidad de opciones en un espacio reducido y evitar la sobrecarga visual en la interfaz. Los componentes que se utilizan es una lista

  • Espacio: Los menús desplegables ocupan poco espacio en la interfaz cuando están cerrados, lo que es especialmente útil en diseños con limitaciones de espacio. Al hacer clic o interactuar con el menú, se despliegan para mostrar todas las opciones disponibles.

  • Navegación: Los menús desplegables se utilizan para proporcionar una navegación rápida y accesible a diferentes secciones, páginas o funciones de una aplicación o sitio web. Al desplegar el menú, los usuarios pueden seleccionar la opción deseada y acceder a su contenido correspondiente, y también la función de dejar una selección a las opciones ofrecidas.

  • Organización: Los menús desplegables pueden tener una estructura jerárquica, lo que significa que las opciones se pueden agrupar en submenús. Esto permite una organización más clara y eficiente de opciones relacionadas. Los submenús se despliegan desde los elementos principales del menú.

  • Configuración: Los menús desplegables también se utilizan para ofrecer opciones de personalización y configuración en una aplicación o sitio web. Los usuarios pueden acceder al menú desplegable y seleccionar las preferencias deseadas, como idioma, tema, configuración de cuenta, organización alfabética, entre otros.

  • Interacción: Los menús desplegables son compatibles con la interacción táctil, lo que significa que los usuarios pueden tocarlos o hacer clic en ellos en dispositivos móviles o táctiles. Además, los menús desplegables suelen ser accesibles para usuarios con discapacidades visuales o de movilidad, ya que los navegadores y las tecnologías de asistencia pueden interpretar y comunicar su contenido correctamente.

  • Cierre: Los menús desplegables suelen cerrarse automáticamente una vez que el usuario ha seleccionado una opción o ha hecho clic fuera del menú. Esto ayuda a mantener la interfaz ordenada y a evitar que los menús desplegables obstruyan el contenido principal.

Tipos de menús desplegables

En este sistema de diseño, los menú desplegables aparecen cuando el usuario interactúa con un botón, un campo de texto, botón de ícono y el resultado de una búsqueda:

  1. Botón con menú desplegable
  2. Botón de icono con menú desplegable
  3. Campo de texto con menú desplegable
  4. Buscador con menú desplegable
  • Botón: Es el componentes más común y se utiliza para navegar, filtrar o seleccionar múltiples opciones. Estos incluyen texto, icono antes y/o después del texto, divisores y composiciones simples de una y dos líneas.
  • Botón de Icono: Este menú desplegable es el más simple y compacto de todos, el más común utilizado es el icono desplegable de tres puntos horizontal (secundario) o vertical (principal). Este reúne contenido para navegar, filtrar o seleccionar múltiples opciones. Generalmente su posición es esquina superior derecha de una interfaz de usuario, como una barra de herramientas, una lista de elementos o una tarjeta, y al hacer clic o tocar sobre él se despliegan acciones, configuraciones, opciones de edición, compartir contenido u otras funciones relacionadas.También existen iconos que sumado a una flecha, indican que contienen mas información al presionarlos, como por ejemplo el ícono de idioma.
  • Campo de Texto: En esta situación el menú desplegable funciona como un selector de opción única principalmente para enviar información en un formulario (input).
  • Búsqueda: Las opciones de un resultado de una búsqueda realizada por un usuario, desplegará una lista de opciones complementarias para ayudar en la selección de lo buscado con un escaneo más rápido y con menor esfuerzo.e

Lista desplegable

  • Opcion 1
  • Opcion 2
  • Opcion 3
  • Opcion 4
  • Opcion 5

HTML

<div class="dropdown">
<label id="btn-icono-1" onclick="botonIconoActivar()" class="btn-icono-select" for="btn-icono-toggle" style="padding: 9px 10px 9px 20px; width:260px; justify-content: space-between;">
<span id="label-texto"> Selecciona tu opción </span>
<img class="flecha-abajo" src="iconos/abajo_lineal.svg" alt="" width="32" height="32">
<img class="flecha-arriba" src="iconos/arriba_lineal.svg" alt="" width="32" height="32">
</label>
<input type="checkbox" class="fab-checkbox" id="btn-icono-toggle">

<ul class="menu-desplegable" style="margin-top:55px; position:relative;">
<li>Opcion 1 <img src="iconos/hecho_lineal.svg" alt=""></li>
<li>Opcion 2 <img src="iconos/hecho_lineal.svg" alt=""></li>
</li> <li>Opcion 3 <img src="iconos/hecho_lineal.svg" alt=""></li>
</li>
<li>Opcion 4 <img src="iconos/hecho_lineal.svg" alt=""></li>
</li>
<li>Opcion 5 <img src="iconos/hecho_lineal.svg" alt=""></li>
</li>
</ul>
</input>
</div>

CSS

input.fab-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}

label.btn-icono-select {
align-items: center;
background: #FFFFFF;
border-radius: 10px;
border: 3px solid transparent;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
height: 50px;
justify-content: center;
line-height: 26px;
mix-blend-mode: normal;
padding: 9px 10px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

label.btn-icono-select:hover {
background: #EBF2F9;
}

label.btn-icono-activar {
background: #EBF2F9;
border: 3px solid #024588;
}

.flecha-abajo {
display: block;
}

.flecha-arriba {
display: none;
}

.esconder {
display: none;
}

.mostrar {
display: block !important;
}

.menu-desplegable {
display: none;
position: absolute;
top: 58px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFFFFF;
width: 100%;
max-width: 322px;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
transition: 0.3s ease-in-out;
}

.menu-desplegable li {
padding: 12px 20px;
text-decoration: none;
display: flex;
border-radius: 0 0 0 0;
justify-content: space-between;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
transition: 0.3s ease-in-out;
cursor: pointer;
}

.menu-desplegable li:first-child {
border-radius: 10px 10px 0 0;
}

.menu-desplegable li:last-child {
border-radius: 0 0 10px 10px;
}

.menu-desplegable li:hover {
background-color: #EBF2F9;
}

.menu-desplegable li:active {
background-color: #D7E5F4;
}

.menu-desplegable li:first-child:hover {
background-color: #EBF2F9;
border-radius: 10px 10px 0 0 !important;
}

.menu-desplegable li:first-child:active {
background-color: #D7E5F4;
border-radius: 10px 10px 0 0 !important;
}

.menu-desplegable li:last-child:hover {
background-color: #EBF2F9;
border-radius: 0 0 10px 10px !important;
}

.menu-desplegable li:last-child:active {
background-color: #D7E5F4;
border-radius: 0 0 10px 10px !important;
}

.fab-checkbox:checked+.menu-desplegable {
display: block;
}

.menu-desplegable .activo {
background: #D7E5F4;
transition: 0.3s ease-in-out;
}

.menu-desplegable li img {
display: none;
transition: 0.3s ease-in-out;
}

JS

function botonIconoActivar() {
const miBoton = document.getElementById("btn-icono-1");
miBoton.classList.toggle("btn-icono-activar");

const flechaAbajo = miBoton.querySelector(".flecha-abajo");
flechaAbajo.classList.toggle("esconder");

const flechaArriba = miBoton.querySelector(".flecha-arriba");
flechaArriba.classList.toggle("mostrar");
}

const elementos = document.querySelectorAll(".menu-desplegable li");
var label = document.getElementById("label-texto");

elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {

elementos.forEach((boton) => {
var imagen2 = boton.querySelector("img");
if (boton != elemento) {
boton.classList.remove("activo");
imagen2.classList.remove("mostrar");
label.textContent = "Selecciona tu opción";
}
});

var imagen = elemento.querySelector("img");
var texto = elemento.textContent;
elemento.classList.toggle("activo");
imagen.classList.toggle("mostrar");
if (elemento.classList.contains("activo")) {
label.textContent = texto;
} else {
label.textContent = "Selecciona tu opción";
}

});
});

Menú Desplegable

Código copiado al portapapeles