Este ejercicio de CSS de menú responsive propone una navegación que cambia de distribución sin ocultar los enlaces en pantallas estrechas.
Enunciado
Crea cuatro enlaces. En móvil se apilan y en pantallas amplias forman una fila flexible. Mantén el orden del documento y señala la página actual.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<nav class="nav-principal" aria-label="Principal">
<ul>
<li><a href="/" aria-current="page">Inicio</a></li>
<li><a href="/servicios/">Servicios</a></li>
<li><a href="/proyectos/">Proyectos</a></li>
<li><a href="/contacto/">Contacto</a></li>
</ul>
</nav>
<style>
.nav-principal ul {
display: flex;
flex-direction: column;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.nav-principal a {
display: block;
padding: .75rem 1rem;
color: #1e3a8a;
}
.nav-principal a[aria-current="page"] { font-weight: 700; }
.nav-principal a:focus-visible { outline: 3px solid #1d4ed8; }
@media (min-width: 40rem) {
.nav-principal ul { flex-direction: row; flex-wrap: wrap; }
}
</style>Los enlaces conservan su función nativa. El menú evita un control adicional en móvil y permite comprobar el diseño con pocos elementos. Ajusta las rutas a páginas reales y actualiza aria-current según la página.
Cómo comprobar tu solución
- Prueba en un ancho estrecho y después a más de 40 rem.
- Navega con Tab y verifica que el foco se ve.
- Cambia «Servicios» por un texto más largo y comprueba que los enlaces pueden saltar de línea.
Reto adicional
Añade una segunda navegación en el pie con otro nombre accesible. Comprueba que ambas regiones se distinguen y que los estilos no afectan a listas ajenas.
Repasa los conceptos en el tutorial de MasterCodePro.
