DLos ropdowns reciben muchas críticas del mundo de la interfaz de usuario y, si somos honestos, no es sin razón. Si se hacen mal, se vuelven engorrosos, abrumadores y feos. Pero de eso no se trata esta hoja de trucos. Aquí hablaremos sobre qué hacer cuando tener para usarlos.
También quiero aclarar que existen dos tipos principales de menús desplegables: los que se usan para la navegación y los que se usan en los formularios. Para el propósito de esta hoja de trucos, solo veremos la variante de formulario.
En esta hoja de trucos, repasaremos lo siguiente:
AnatomíaTipos y variaciones de menús desplegablesEstilos de menús desplegablesEstados de menús desplegablesQué debe decir el marcador de posiciónCuándo no usar un menú desplegable (y cuándo hacerlo)Menúes desplegables nativosLista de verificación de accesibilidadPensamientos finales
La anatomía de un menú desplegable es muy similar a la de un campo de entrada de texto, y un poco más. Para comparar los dos, vea esta historia anterior.
Anatomía del campo desplegable
Si bien los menús desplegables estándar son ampliamente comprendidos, existen algunos tipos y variaciones diferentes que quizás debas considerar para tu próximo esfuerzo. Tenga en cuenta que para estos ejemplos solo incluyo menús desplegables utilizados en formularios y no aquellos utilizados en la navegación.
Menú desplegable estándar
El menú desplegable estándar es en lo que pensamos cuando escuchamos la palabra “menú desplegable”. En su estado activo, debería verse muy similar a un campo de entrada de texto hasta que hagas clic en él y se abra un menú.
Menú desplegable estándar
Menú desplegable con sugerencia automática
Amo a estos chicos malos sexys. La primera vez que me di cuenta de la sugerencia automática fue en el campo de búsqueda de Google; sin embargo, no tengo idea de dónde se implementó por primera vez. (Déjame…