Muchos sitios, aplicaciones y páginas web utilizan menús desplegables para mostrar una lista de información. Puedes utilizarlos para crear menús de navegación, opciones para formularios y mucho más.
Si estás viendo algunos de estos menús o listas, puede que te imagines lo complejo que puede ser crearlos. Y sí – en algunos casos, se vuelve un poco complejo.
Un menú desplegable es una lista de opciones que se despliega verticalmente cuando un usuario interactúa con el menú haciendo clic en él o pasando el cursor por encima.
Este menú también desaparece cuando el usuario deja de interactuar con el menú haciendo clic de nuevo o alejando el cursor del menú.
En este artículo, aprenderás cómo añadir una lista desplegable al elemento select de tu página web. También aprenderás las diferentes opciones disponibles, y cómo crear una lista/menú desplegable que se pueda desplazar.
Cómo Crear una Lista Desplegable en HTML
En HTML, por defecto, siempre se puede crear una lista desplegable con la etiqueta select junto a la etiqueta option. Esto se utiliza principalmente dentro de formularios para seleccionar un valor de una lista de muchas opciones.
La etiqueta select tiene dos atributos principales: los atributos name e id.
Sintaxis:
<select name="" id="">
<option value="">...</option>
// ...
</select>El atributo name se utiliza para identificar el desplegable cuando se envía una selección en un formulario. Puedes conectar el atributo id a una etiqueta que tenga valores similares a los de su atributo for.
Sintaxis:
<label for="languages">Lista de Lenguajes:</label>
<select name="" id="languages">
<option value="">...</option>
// ...
</select>La etiqueta select también tiene algunos atributos booleanos opcionales como disabled (que desactiva los campos de selección), required (que hace que el campo sea obligatorio en un formulario), y muchos más.
<select name="" id="languages" required>
// ...
</select>
// Or
<select name="" id="languages" disabled>
// ...
</select>Dentro de la etiqueta select, puedes añadir muchas opciones en la etiqueta individual option. La etiqueta option tiene un atributo value que especifica un valor que se envía desde el formulario cuando se selecciona una opción.
<select name="language" id="language">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="java">Java</option>
</select>Seguro te preguntas si HTML podría incluirse en la lista de lenguajes de programación. En este caso puedes revisar: ¿HTML Es o No Es, un Lenguaje de Programación?
Existen otros atributos booleanos como disabled (que desactiva la opción en el menú), y selected (que se utiliza para establecer una opción concreta como la opción seleccionada por defecto cuando se carga la página en lugar de la primera opción).
<label for="language">Selecciona un lenguaje de programación: </label>
<select name="language" id="language">
<option value="javascript" disabled>JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="java" selected>Java</option>
</select>
En el código anterior, la primera opción tiene el atributo disabled, lo que significa que no podrá seleccionar la opción. La cuarta opción tiene un atributo selected, lo que significa que en lugar de tener JavaScript como valor seleccionado por defecto, se seleccionará Java.
See the Pen Menú Desplegable HTML by Alex (@htmldesdecero) on CodePen.
Múltiple Selección y Múltiple Capas
Con el atributo multiple, puedes permitir que el usuario seleccione varios elementos del desplegable.
<select name="languages" id="lang" multiple>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
Esto hace que varios elementos sean visibles por defecto. Para seleccionar varios elementos, el usuario debe mantener pulsada la tecla Shift o Ctrl y, a continuación, seleccionar con el ratón.
Eso no es todo lo que puede hacer con las etiquetas select y option. También puedes crear un cuadro de selección de varias capas con el elemento <optgroup> dentro de una etiqueta <select>. Puedes convertir el menú desplegable ya creado en un cuadro de selección de varias capas como este:
<select name="languages" id="lang">
<optgroup label="primera-lista">
<option value="select">Seleccionar Lenguaje</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
</optgroup>
<optgroup label="segunda-lista">
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</optgroup>
</select>See the Pen Menú Desplegable HTML 2 by Alex (@htmldesdecero) on CodePen.
Cómo Crear un Menú Desplegable con Hover
Cuando te desplazas o visitas muchas páginas web avanzadas y modernas, te darás cuenta de que tienen menús desplegables.
Estos menús se utilizan para la navegación y ayudan a mantener juntos enlaces similares. La mayoría de las veces, al pasar el ratón sobre el menú principal, aparece la lista desplegable.
Puedes crear este tipo de menús de varias maneras, ya que no hay una sintaxis directa para construir uno.
Puedes crearlo utilizando estilos CSS para mostrar y ocultar la lista desplegable cuando el usuario pase el ratón por encima del menú. Un enfoque muy bueno es crear un div que contenga el menú y el desplegable.
<div class="dropdown">
<button>Perfil</button>
<div class="dropdown-options">
<a href="#">Panel</a>
<a href="#">Ajustes</a>
<a href="#">Cerrar Sesión</a>
</div>
</div>Este div sirve de contenedor y puedes asignarle una posición relative y display de inline-block, para que las opciones desplegables aparezcan debajo del menú.
.dropdown {
display: inline-block;
position: relative;
}Puedes diseñar tu botón y las dropdown-option como quieras. Pero el estilo principal que controla el efecto hover, por defecto, establece que las dropdown-option no se muestren. Entonces, cuando el ratón pasa sobre el menú, la visualización no se establece en block, por lo que las opciones son visibles. También se establece la position a absolute, para que las opciones aparezcan debajo del menú, y el overflow a auto para permitir el scroll en pantallas pequeñas.
.dropdown-options {
display: none;
position: absolute;
overflow: auto;
}
.dropdown:hover .dropdown-options {
display: block;
}En la demostración siguiente, añadimos más estilos para que el menú desplegable resulte más atractivo y agradable:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
Conclusión
En este artículo has aprendido a crear una lista desplegable con la etiqueta select. También has aprendido a crear el menú desplegable hoverable con CSS para manejar el efecto hover.
Espero que este tutorial te haya familiarizado más con la etiqueta select para que pueda comenzar a usarla en sus proyectos.
