Al crear sitios web, tiene un espacio limitado para ver todo el contenido. Puede utilizar los menús desplegables para maximizar el espacio.
sitio de comercio electrónico diseñadora de ropa drogadicta utiliza un menú desplegable para mostrar, por ejemplo, todas las categorías de productos. De esta forma, los visitantes pueden comprar toda la colección o pasar el cursor sobre un menú y hacer clic en una de las opciones para reducir la lista a los productos que más les interesen.
En esta publicación, vamos a discutir cómo crear menús desplegables usando HTML para que pueda incluirlos en los diseños de su sitio web.
Menú desplegable HTML
Un menú desplegable es una lista de opciones que solo es visible cuando el usuario interactúa con el menú haciendo clic o pasando el cursor sobre él. Las opciones del menú luego caen verticalmente y desaparecen nuevamente cuando el usuario se desconecta del menú.
Dado que los menús desplegables permiten colocar más contenido y enlaces en la página sin abarrotarla, se usan comúnmente en sitios web y aplicaciones web para ocultar elementos que los usuarios pueden no ver cuando la página se carga por primera vez, pero que aún pueden querer usar. .
Los casos de uso comunes para las listas desplegables de HTML incluyen:
- menús de navegación que enlazan con otras páginas del sitio
- formularios web (incluidos los formularios Bootstrap de Mobile-first) que contienen una lista de opciones entre las que el usuario puede elegir una de ellas
- el sitio busca a través de una lista de opciones de clasificación o filtro para la consulta
- como alternativa a los botones de radio que ahorra espacio en la página
- enumerando acciones adicionales menos comunes que un usuario puede realizar en una aplicación, aquí hay un ejemplo de la herramienta de blogs de HubSpot:
Los menús desplegables contienen varias partes móviles que deben funcionar juntas para garantizar un funcionamiento sin problemas. Si un menú desplegable no funciona como se esperaba, los usuarios pueden frustrarse fácilmente. Por eso es tan importante implementarlos correctamente en HTML.
Sintaxis desplegable de HTML
Para comprender cómo funcionan los menús desplegables en HTML, debe saber tres cosas: una etiqueta, una selección y una opción. Veamos cada uno de ellos con más detalle.
etiqueta
los
Cuando
Elegir
Elemento
los
- enfoque automático: especifica que el menú desplegable debe tener foco de entrada (es decir, es seleccionado por el navegador y puede ser controlado por el teclado) al cargar la página.
- apagado: apaga el menú desplegable.
- muchos: Le permite seleccionar múltiples opciones.
- requerido: Cuando se coloca en un formulario, hace que el formulario sea necesario para enviar el formulario.
- Talla: establece el número de opciones que se muestran en la lista desplegable.
opción
También puede usar atributos opcionales apagadoque deshabilita una opción en un menú, o elegidoque selecciona automáticamente una opción al cargar la página.
Cómo hacer menús desplegables en HTML
Crear un menú desplegable básico en HTML es fácil con
Paso 1: crea un elemento de etiqueta.
Para empezar, agrega
<label for="dog-names">Choose a dog name:</label>
Paso 2: crea el elemento seleccionado.
Luego añade
En este ejemplo, estableceré ambos Nombre y IDENTIFICACIÓN atributos a perros. Aquí está el código HTML:
<select name="dog-names" id="dog-names"></select>
Paso 3: cree elementos de opción y colóquelos dentro del elemento seleccionado.
Finalmente agregarás
<option value="rigatoni">Rigatoni</option>
<option value="dave">Dave</option>
<option value="pumpernickel">Pumpernickel</option>
<option value="reeses">Reeses</option>
Aquí está el resultado:
ver la pluma Menú solo HTML por HubSpot (@hubspot) en CódigoPen.
Valor predeterminado para el menú desplegable HTML
Cuando crea un menú desplegable de esta manera, la primera opción que aparece en el código HTML será el valor predeterminado del menú desplegable, como se ve en el ejemplo anterior.
Para cambiar el valor predeterminado, utilice elegido atributo lógico. Solo agrégalo a la etiqueta de apertura.
En el siguiente ejemplo, verá un menú desplegable de planes de membresía. Si bien las opciones incluyen el plan gratuito y el plan bronce, el atributo lógico se usa para establecer el valor predeterminado en plata.
ver la pluma Menú desplegable solo HTML con un atributo booleano por HubSpot (@hubspot) en CódigoPen.
Cómo hacer un menú desplegable flotante
Si desea que el menú desplegable aparezca cuando el usuario se desplaza sobre un elemento, debe usar HTML y CSS. Veamos el proceso a continuación.
Paso 1: cree y personalice un div con el nombre de clase «desplegable».
Primero, crea un div y agrega una clase soltar a él. En CSS, establezca la visualización de este div en bloque incorporado y posición a pariente. Esto garantiza que el contenido desplegable aparezca justo debajo del botón desplegable.
Aquí está el código HTML:
<div class="dropdown"></div>
Aquí está el CSS:
.dropdown {
display: inline-block;
position: relative;
}
Paso 2: crea un elemento que se pueda desplazar.
Luego, cree un elemento que mostrará una lista desplegable cuando el usuario pase el mouse sobre él. En este ejemplo, crearemos un botón. Coloque el botón dentro del div.
Aquí está el código HTML existente:
<div class="dropdown">
<button>HubSpot Resources</button>
</div>
Paso 3: Cree y personalice el contenido de la lista desplegable.
Ahora es el momento de crear el contenido desplegable real que se ocultará hasta que el usuario pase el cursor sobre el botón. En el siguiente ejemplo, pondremos tres enlaces en el menú desplegable. Cada enlace estará envuelto en un div con el nombre de la clase contenido desplegable.
Aquí está el HTML para el contenido del menú 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, establezca la visualización de este div en Nosu posición a absolutoy su ancho a 100%. Esto garantiza que el contenido de la lista desplegable aparezca directamente debajo del botón y tenga el mismo ancho que el botón. También establezca la propiedad de desbordamiento en automático para habilitar el desplazamiento en pantallas pequeñas. Finalmente la sombra de la caja la propiedad se define para que el contenido de la lista desplegable se destaque sobre el fondo.
Aquí está el CSS:
.dropdown-content {
display: none;
position: absolute;
width: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Paso 4: establezca el estado de desplazamiento del menú desplegable.
Para asegurarse de que el menú desplegable realmente se muestre al pasar el mouse, debe especificar la propiedad de visualización de div con una pseudoclase :flotar. Esto se define por el estado especial del elemento; en este caso, cómo se ve cuando el usuario pasa el mouse sobre él.
Aquí está el CSS:
.dropdown:hover .dropdown-content {
display: block;
}
Paso 5: Diseña los enlaces en el menú desplegable.
Sin estilo, los enlaces en el menú desplegable serían de color azul claro y subrayados, sin espacios entre ellos. Para que se vean mejor, establezcamos el color de fuente en negrocomplemento a 5pxy decoración de texto propiedad de No.
Aquí está el CSS:
.dropdown-content a {
display: block;
color: #000000;
padding: 5px;
text-decoration: none;
}
Paso 6: cambie el color de los enlaces desplegables al pasar el mouse.
También puede diseñar enlaces para que se vean diferentes al pasar el mouse usando una pseudoclase :flotar. Suponga que desea cambiar el color del texto y el fondo del enlace cuando el usuario pasa el cursor sobre ellos.
Aquí está el CSS:
.dropdown-content a:hover {
color: #FFFFFF;
background-color: #00A4BD;
}
Aquí está el código junto y el resultado:
ver la pluma Menú desplegable flotante con enlaces por HubSpot (@hubspot) en CódigoPen.
menú de opción múltiple
En los ejemplos anteriores, los usuarios solo podían seleccionar una opción del menú desplegable. Sin embargo, también puede crear un menú que permitirá a los usuarios seleccionar múltiples opciones. Esto se llama una lista desplegable de opción múltiple.
Necesita HTML, CSS y JavaScript para crear una lista desplegable de opciones múltiples. Este es un ejemplo del desarrollador de juegos y aplicaciones Charlie Walter. Tenga en cuenta que utiliza un elemento de formulario.
ver la pluma Selección múltiple (menú desplegable) de Charlie Walter (@cjonasw) en CódigoPen.
Menú desplegable HTML disponible
Hay otro aspecto de las listas desplegables que aún no hemos mencionado, pero que vale la pena considerar: la disponibilidad. La accesibilidad web es el principio de que todas las experiencias en línea deben ser accesibles para todos, con un enfoque en los usuarios con discapacidades, deficiencias y limitaciones físicas, visuales y cognitivas.
Los menús desplegables deben estar disponibles para que estos usuarios puedan navegar por su sitio, enviar formularios y hacer otras cosas como cualquier otro usuario. De lo contrario, puede llevar más tiempo encontrar lo que necesitan u omitir partes de su sitio web por completo.
Al diseñar un menú desplegable en HTML, existen algunas prácticas recomendadas de accesibilidad:
- Evite demasiados niveles en el menú ya que esto dificulta que los usuarios con problemas de movilidad naveguen por el menú. Si su menú tiene más de un nivel de submenús (es decir, un menú dentro de un menú dentro del menú principal), probablemente haya una mejor manera de organizar su menú o sitio web.
- Todos los menús de su lado, incluidas las listas desplegables, deben ser accesibles con la tecla Tabulador y la tecla Intro. La pestaña avanza a través de los elementos del menú y Entrar abre/cierra los menús.
- Cuidado con las trampas del teclado. Esto sucede cuando el usuario puede desplazarse por los elementos del menú pero no puede «abandonar» el menú y, por lo tanto, está atascado en un bucle.
- Para los menús activados por desplazamiento, agregue un retraso (alrededor de un segundo) entre el momento en que el cursor está fuera del menú y el menú se cierra. Esto ayuda a los usuarios sin control de motricidad fina a mantenerse ocupados con el menú si se apagan accidentalmente.
- El uso de HTML semántico siempre que sea posible no solo hace que el código sea más fácil de entender, sino que también hace que los menús sean accesibles para los lectores de pantalla.
Para conocer los conceptos básicos del acceso al menú desplegable, consulte nuestra guía detallada: Cómo crear menús desplegables y deslizantes que estén disponibles en línea.
Cree fácilmente listas desplegables en HTML.
Con un poco de HTML y CSS, puede crear fácilmente menús desplegables para su sitio web que sean sencillos, intuitivos y visualmente atractivos.
Puede configurar el menú desplegable para que se inicie al hacer clic o pasar el mouse; en cualquier caso, ahorra un espacio valioso en el sitio con costos de interacción muy bajos, razón por la cual los menús desplegables han sido y siguen siendo un elemento básico del diseño web.
Nota del editor: esta publicación se publicó originalmente en junio de 2021 y se actualizó para que sea completa.
