Listas y navegación

25 min

Intermedio

De lista a menú

Casi todos los menús de navegación que ves en la web son, por debajo, una lista <ul> con enlaces adentro — HTML semánticamente correcto (es una lista de páginas), estilizado con CSS para que no se vea como una lista.

<nav>
    <ul class="menu-links">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Cursos</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

El primer paso siempre es quitar el estilo de lista por defecto:

.menu-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Probá vos: quitar el estilo de lista

Quitale las viñetas y el padding/margin por defecto a .menu-links, y después ponela en fila con lo que ya sabés de Flexbox.

:hover — cambiar el estilo al pasar el mouse

:hover es una pseudo-clase: se agrega después de un selector, y la regla solo se aplica mientras el mouse está encima de ese elemento. Es lo que le da a un menú esa sensación de "responde cuando lo tocás".

.menu-links a {
    color: white;
    text-decoration: none;
}
.menu-links a:hover {
    color: yellow;
}

Fijate que :hover va pegado al selector, sin espacio — a:hover selecciona un <a> mientras el mouse está encima; a más adelante :hover con espacio sería otra cosa completamente distinta.

Probá vos: un link que responde

Hacé que los enlaces del menú cambien de color cuando el mouse pasa por encima. Podés probarlo de verdad pasando el mouse sobre el enlace en la vista previa.

Un submenú desplegable

Combinando varias cosas que ya viste — posicionamiento, display, :hover — se arma un submenú que aparece al pasar el mouse por un ítem del menú:

nav ul li {
    position: relative; /* referencia para el submenú */
}
nav ul ul {
    display: none; /* oculto por defecto */
    position: absolute;
    top: 100%;
    left: 0;
}
nav ul li:hover > ul {
    display: flex; /* aparece al pasar el mouse por el  padre */
    flex-direction: column;
}

nav ul li:hover > ul se lee: "un <ul> que sea hijo directo de un <li> que tenga el mouse encima" — por eso el submenú aparece cuando el mouse está sobre el ítem padre, no sobre el submenú mismo.