Crea un menú desplegable en HTML con estos sencillos pasos

Brindarle a los visitantes de tu sitio web una excelente experiencia de usuario sí es posible, si aprendes a crear un menú desplegable en HTML. Además, como plus adicional, tu información quedará mucho más organizada y facilitarás la navegación web. Por eso, te mostraré cómo hacer un menú desplegable en HTML y CSS, paso a paso y como nos gusta, con ejemplos prácticos.

¿Qué es un menú desplegable en HTML?

Puede que los hayas visto en muchos sitios web. Un menú desplegable en HTML es ese que aparece a modo de lista cuando tú interactúas con un elemento, como un botón o enlace. Lo cierto es que sirve mucho para ahorrar espacio en la interfaz, porque muestra solo las opciones necesarias. Recuerda que puedes crear desplegables simples usando HTML puro, o combinarlos con CSS y JavaScript para lograr un diseño más avanzado y dinámico.

Tipos de menús desplegables

1. Menú desplegable básico: Utiliza solo HTML para mostrar una lista de opciones.
2. Menú desplegable con CSS: Incluye estilos y animaciones para hacerlo más atractivo.
3. Menú dinámico con JavaScript: Añade interactividad avanzada, como submenús o efectos al hacer clic.

Cómo hacer un menú desplegable en HTML y CSS

Crea un elemento <label> y un menú desplegable básico

Primero que todo, incluye un elemento <label> que funcione como el título o identificador de tu menú desplegable.

Luego de eso, añade un elemento <select> para listar las opciones.

Así tendría que aparecerte el HTML básico para un menú desplegable:

<label for="opciones">Elige una opción:</label>
<select id="opciones" name="opciones">
    <option value="inicio">Inicio</option>
    <option value="acerca">Acerca de</option>
    <option value="servicios">Servicios</option>
    <option value="contacto">Contacto</option>
</select>

Con este código tendrás un menú desplegable básico. Ten en cuenta que, el atributo for del <label> está vinculado al atributo id del <select>, con el fin de mejorar la accesibilidad.

Agrega estilos con CSS

Con el HTML listo ya puedes usar CSS para mejorar el aspecto del menú.

Este sería el CSS para estilizar el menú desplegable:

select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
    cursor: pointer;
}

select:hover {
    background-color: #eaeaea;
}

Si aplicas este estilo, verás que el menú tendrá bordes redondeados y un efecto visual cuando pases el cursor por encima.

Crea un menú desplegable avanzado con CSS y pseudoclases

También puedes crearle un diseño más interactivo. ¿Cómo? pues puedes crear un menú que se despliegue al pasar el cursor por encima de un botón.

Este tipo de menú desplegable HTML y CSS es muy útil para barras de navegación.

Así te queda el HTML para un menú desplegable avanzado:

<div class="dropdown">
    <button class="dropdown-button">Menú</button>
    <div class="dropdown-content">
        <a href="#">Inicio</a>
        <a href="#">Acerca de</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </div>
</div>

Observa el CSS para el diseño avanzado:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    padding: 12px 16px;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Como ves, el menú solo aparece cuando el usuario pasa el cursor sobre el botón, gracias a la pseudoclase :hover.

Crea un menú desplegable con múltiples selectores

En caso de que necesites un menú que permita seleccionar varias opciones, utiliza el atributo multiple en <select>:

Mira el HTML para múltiples selectores:

<label for="multi-select">Selecciona tus intereses:</label>
<select id="multi-select" name="intereses" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
</select>

Así queda el CSS para mejorar la apariencia:

select[multiple] {
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
}

Podrás seleccionar más de una opción a la vez con este tipo de menú. Por eso es fantástico para formularios o encuestas.

Añade interactividad con JavaScript

También puedes lograr un menú desplegable HTML CSS JavaScript. Solo incluye un efecto de clic para desplegar o esconder el contenido.

Este es el HTML con JavaScript:

<div class="dropdown">
    <button class="dropdown-button" onclick="toggleMenu()">Menú</button>
    <div id="dropdown-content" class="dropdown-content">
        <a href="#">Inicio</a>
        <a href="#">Acerca de</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </div>
</div>

El JavaScript para controlar el menú te quedaría así:

function toggleMenu() {
    const menu = document.getElementById("dropdown-content");
    menu.style.display = menu.style.display === "block" ? "none" : "block";
}

Y el CSS adicional debe verse de esta manera:

.dropdown-content {
    display: none; /* Ocultar inicialmente */
}

Realizando correctamente los pasos anteriores, tu menú se desplegará solo al hacer clic, lo cual resulta perfecto para pantallas táctiles.

Así de fácil aprendiste cómo crear un menú desplegable en HTML. Ya puedes integrarlo en tus proyectos para mejorar la navegación y el diseño de tus sitios web.

Desarrolla aplicaciones y páginas web profesionales desde cero, ingresando al Bootcamp de Desarrollo Web de KeepCoding. Créeme, en muy poco tiempo sabrás todo sobre las herramientas más demandadas y estarás listo para convertirte en un experto del sector IT. ¡Empieza hoy mismo a transformar tu futuro!