Al crear un sitio web es importante tener en cuenta que el espacio no es ilimitado para mostrar tus contenidos; sin embargo, si tu idea es maximizarlo puedes hacer uso de los menús desplegables.
Por ejemplo, el sitio de comercio electrónico Designer Junkie Apparel utiliza este tipo de recursos para mostrar las categorías de sus productos. De este modo los visitantes pueden acceder a todas tus colecciones, o bien seleccionar la categoría de su interés:
En este artículo aprenderás a crear menús desplegables utilizando HTML con el fin de incorporarlos en el diseño de tu sitio web.
Códigos de programación para CSS
Descarga códigos y snippets CSS útiles y funcionales para personalizar y mejorar el diseño de tu sitio web de manera efectiva.
- Pestañas de navegación CSS.
- JavaScript onClick con CSS.
- Degradados CSS.
- Desplegables CSS.
Descargar ahora
Todos los campos son obligatorios.
¿Qué es un menú desplegable en HTML?
Un menú desplegable es una lista de opciones que solamente se revela cuando un usuario interactúa con él, ya sea al hacer clic sobre la opción correspondiente o al desplazarse sobre ella con el cursor. Estas opciones generalmente se despliegan hacia abajo de forma vertical y desaparecen una vez que el usuario deja de interactuar con ellas.
Gracias a que los menús desplegables permiten integrar un mayor volumen de contenido y enlaces en una página sin saturarla, estos recursos se utilizan comúnmente en sitios y aplicaciones web para ocultar información que podría ser poco interesante para todos los usuarios, pero a la que probablemente algunos de ellos quieran acceder.
Los usos más comunes de menús desplegables en HTML son:
- En menús de navegación que contienen enlaces a otras páginas del sitio.
- En formularios (incluyendo algunos formularios móviles como el de Bootstrap) para listar opciones de entre las cuales el usuario debe elegir.
- En buscadores de sitios para listar o filtrar opciones de búsqueda.
- Como alternativas a los botones de opciones para ahorrar espacio en el sitio.
- Para listar acciones adicionales o poco comunes que un usuario puede requerir al utilizar una aplicación, como en el siguiente ejemplo de la herramienta de blogs de HubSpot:
Los menús desplegables pueden contener algunas partes móviles que deberán trabajar en conjunto para promover una buena experiencia de navegación. Si tu menú no trabaja adecuadamente, los usuarios podrán sentirse frustrados y abandonar tu sitio. Por ello es importante implementarlos de manera correcta en HTML.
Sintaxis de los menús desplegables en HTML
Para entender cómo funcionan los menús desplegables en HTML necesitarás dominar el uso de tres elementos: las etiquetas (<label>), la selección (<select>) y las opciones (<option>). Revisemos a detalle cada una de ellas.
label
<label> está diseñado para crear una etiqueta para un menú o cualquier otro elemento en una página. Para asociar estas etiquetas con el menú desplegable es necesario utilizar el atributo for y compartir su valor con el atributo id del siguiente elemento <select>.
Cuando un <label> es asociado a un <select> al hacer clic en el elemento etiquetado automáticamente serás redirigido al elemento seleccionado.
select
El elemento <select> sirve para crear el menú desplegable. Este elemento contiene dos atributos: name y id. El atributo id deberá tener los mismos valores que los del atributo for del elemento <label>. Por su parte, el atributo name se utiliza para identificar el desplegable cuando la selección se emplea para llenar un formulario.
Con <select> puedes además incluir algunos otros atributos, tales como:
- autofocus: sirve para especificar que el menú desplegable tiene un método de entrada automático cuando la página carga. Por ejemplo, cuando las opciones son seleccionadas automáticamente por el navegador y permite que se controlen con el teclado.
- disabled: deshabilita el menú desplegable.
- multiple: permite que sea seleccionada más de una opción del menú.
- required: al incluir un formulario es necesario responderlo para enviarlo.
- size: establece el número de opciones que se visualizarán en el desplegable.
option
<select> generalmente contiene uno o más elementos <option> en su interior. Cada <option> representa una de las alternativas del menú. Las etiquetas deben incluir el valor del atributo; de este modo se puede especificar el valor correspondiente a cada opción del menú cuando se selecciona.
También puedes incluir el atributo disabled en este elemento; con ello podrás inhabilitar alguna opción en el menú. Otra opción es incluir el atributo select, que automáticamente selecciona la opción a cargar.
¿Cómo crear un menú desplegable en HTML?
Crear un menú desplegable es realmente sencillo al utilizar el elemento <select>. Veamos paso a paso cómo hacerlo.
Paso 1: Crea un elemento <label>
Para empezar, añade un elemento <label> a tu documento en HTML. Debes comenzar con un atributo for con un nombre para tu lista desplegable. Por ejemplo, si tu menú desplegable contiene un listado de nombres de perro, puedes nombrar tu atributo for como dog-names. Tu HTML debe lucir así:
Paso 2: Crea un elemento <select>
A continuación debes añadir un elemento <select> inmediatamente después de tu elemento <label>. En él, agrega un atributo name y uno id. El id debe tener el mismo valor que diste a tu atributo for en <label>. En name debes definir los valores que identificarán a tu menú.
En nuestro ejemplo estableceremos el valor dog-names a los atributos name y id. Tu HTML deberá verse así:
Paso 3: Crea uno o más elementos <option> y colócalos dentro de tu elemento <select>
Luego, debes añadir algunos elementos <option> entre la apertura y el cierre del elemento <select>. Añade todas las opciones que desees que aparezcan en tu menú. Posteriormente, debes añadir un valor de atributo para cada <option> y establecer un nombre para cada una de las opciones. Veamos cuatro ejemplos:
Aquí tenemos el resultado:
![<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>](https://no-cache.hubspot.com/cta/default/53/81607f16-1f47-4f2d-9363-c6ac8242f7db.png){kind=small}
Valor predeterminado para desplegables en HTML
Al crear un menú desplegable con este método la primera opción listada en tu HTML será el valor por defecto del desplegable, como puedes ver en el ejemplo anterior.
Para cambiar este valor predeterminado puedes usar el elemento booleano selected. Simplemente deberás añadir al inicio de tu elemento <option> aquel valor que quieras mostrar después del atributo value.
En el ejemplo puedes ver un menú desplegable para planes de membresía. A pesar de que las opciones incluyen el plan gratuito y de bronce, el atributo booleano nos ha permitido poner al plan silver como la opción predeterminada.
Cómo hacer un menú que se despliegue al desplazarse sobre él
Si quieres diseñar un menú desplegable que aparezca cuando el usuario se desplace sobre un elemento de tu página, deberás utilizar HTML y CSS de forma complementaria. Veamos el proceso.
Paso 1: Crea y diseña un bloque con el nombre de clase «dropdown»
El primer paso es crear un bloque (o div) y añadir en él la clase dropdown. En CSS debes establecer la visualización de este bloque a inline-block y su posición a relative. Esto permite que el contenido desplegable aparezca justo debajo del botón de despliegue.
Así debe lucir tu HTML:
Y así tu CSS:
Paso 2: Crea un elemento con función por desplazamiento
Es momento de crear un elemento que revele la lista desplegable cuando el usuario se desplace sobre él. En nuestro ejemplo crearemos un botón (button). Sitúalo dentro del bloque div.
Así debe lucir tu HTML hasta ahora:
Paso 3: Crea y dale estilo a tu contenido desplegable
Es momento de crear el contenido desplegable que estará oculto hasta el momento en que el usuario se desplace sobre el botón que has creado. En nuestro ejemplo, incluimos tres enlaces dentro del menú. Cada uno de estos enlaces irá contenido en un bloque con el nombre de clase dropdown-content.
Así debe verse tu HTML para el contenido desplegable:
<div class="dropdown-content"> <a rel="noopener" target="_blank" href="https://blog.hubspot.com/">Blog</a> <a rel="noopener" target="_blank" href="https://academy.hubspot.com/">Academy</a> <a rel="noopener" target="_blank" href="https://www.youtube.com/user/hubspot">YouTube</a></div>
En CSS debes establecer el display de tu bloque a none, su posición a absolute y su ancho a 100 %. Esto asegura que tu contenido desplegable aparezca debajo del botón y que tenga el mismo ancho que este. Adicionalmente debes establecer la propiedad overflow a auto para permitir que los usuarios puedan desplazarse hacia abajo en el menú, en caso de que estén navegando a través de una pantalla pequeña. Finalmente, la propiedad box-shadow debe tener los valores necesarios para que el contenido desplegable sobresalga sobre el fondo de tu página.
Este será tu CSS:
Paso 4: Establece el estado de tu menú desplegable
Para asegurarte de que tu contenido desplegable de hecho se mostrará cuando el usuario se desplace sobre el botón, debes especificar en tu bloque display el uso de la pseudoclase :hover. Esto te permitirá establecer un estado especial para tu elemento. En este caso, aparecerá cuando el usuario se desplace sobre el botón.
Así debe lucir tu CSS:
Paso 5: Da estilo a los enlaces dentro de tu menú
Si no les das un estilo especial a tus enlaces, estos aparecerán con un color azul brillante y subrayados, sin espacio alguno entre ellos. Para hacer que luzca mejor puedes establecer como color de la tipografía negro (#000000), con un parche de 5px y sin decoraciones en tu texto (text-decoration).
Así debe verse tu CSS:
Paso 6: Cambia el color de los enlaces cuando el usuario se desplace sobre ellos
Una alternativa para dar un mejor aspecto a tu contenido desplegable es hacer que tus enlaces cambien de color o de formato al desplazarse sobre ellos usando la pseudoclase :hover.
Así debe lucir tu CSS:
Y este es el código completo junto con su visualización:
Desplegables con múltiples selectores
En los ejemplos anteriores los usuarios solo pueden seleccionar una de las opciones del menú desplegable. Sin embargo, quizá quieras crear un menú que permita seleccionar múltiples opciones. A estas herramientas las llamaremos desplegables con múltiples selectores.
Para crear un desplegable de este tipo deberás emplear HTML, CSS y JavaScript. Este es un ejemplo creado por el diseñador de aplicaciones y juegos Charlie Walter. ¿Notas que el resultado es un formulario?
Accesibilidad en desplegables HTML
Existe otro aspecto que no hemos mencionado, pero que es esencial para el diseño de desplegables: la accesibilidad. La accesibilidad web se basa en el principio de que todas las experiencias en línea deben ser utilizables para todos. Esto tiene como objetivo garantizar que las personas con discapacidades físicas, visuales y cognitivas o con alguna limitación de otro tipo puedan acceder a estas funciones y a sus respectivos contenidos.
Por ello los menús desplegables deben ser accesibles y permitir que cualquier visitante navegue e interactúe con tu sitio. Si no aseguras la accesibilidad, a estos usuarios les tomará más tiempo encontrar lo que necesitan o se perderán de algunas secciones de tu sitio.
Al diseñar un menú desplegable en HTML debes tomar en consideración la implementación de algunas de estas prácticas:
- Evita que tus desplegables tengan demasiados niveles, ya que puede ser complicado navegar entre estas opciones para personas con problemas motores. Si tu menú incluye más de un nivel o submenú, considera si no existe una mejor alternativa para estructurar tu sitio.
- Todos los menús de tu sitio, incluyendo los desplegables, deben ser navegables a través del uso de las teclas Tab y Enter. Con Tab los usuarios podrán seleccionar el elemento de interés en tu página y con Enter interactuar con él.
- Ten en cuenta las limitantes de las teclas. En muchas ocasiones los menús pueden desplegarse con el uso de Tab y Enter, pero los usuarios no pueden salir de un menú y ver otros desplegables sin seleccionar alguna opción, por lo que quedan atrapados.
- Al diseñar menús que se despliegan mediante el desplazamiento sobre un elemento puedes incluir un tiempo de respuesta de un segundo, como margen para que los usuarios con problemas motores puedan ver y seleccionar la opción deseada sin que el menú desaparezca.
- Usar HTML semántico siempre que sea posible hará que tu código sea más sencillo de entender y logrará que tus menús sean más accesibles a todos los lectores de pantallas.
Para conocer más sobre menús desplegables puedes revisar nuestro contenido sobre configurar los menús de navegación de tu sitio.
Crea desplegables en HTML de forma sencilla
Con solo un poco de dominio de HTML y CSS es fácil crear menús desplegables intuitivos y atractivos para tu sitio web.
Puedes optar por hacer que tus desplegables se activen con un clic o al desplazarse sobre ellos. En cualquier caso, con estos recursos lograrás ahorrar espacio dentro de tus páginas con un costo de interacción muy bajo. Sin duda, esto ha hecho que los menús desplegables sean una de las funciones preferidas de los diseñadores web.
