Menú

Para mejorar nuestra página web podemos añadir un menú y darle estilo. Para ello, tendremos que añadir el menú en el documento "index.html" y ampliar nuestro documento "estilo.css".

Añadir el menú a "index.html"

Ahora nuestro cuerpo "body" tendrá una nueva etiqueta "header" y, dentro, estará nuestro menú de navegación en forma de lista de enlaces.

<header>
	<ul class="topnav">
		<li><a class="active" href="index.html">Inicio</a></li>
		<li><a href="">Ítem 1</a></li>
		<li><a href="">Ítem 2</a></li>
		<li class="right"><a href="">Ítem 3</a></li>
	</ul>
</header>

El significado de "ul" es "Unordered Lists", listas sin orden. Y "List Item" (lista de ítems), es lo que significa "li". Todas estas líneas van después de que sea abra la etiqueta del cuerpo. Y después de ellas, vendrían las cabeceras con sus párrafos.

Ampliar el documento "estilo.css"

Para dar estilo al menú, añadiremos unas quantas líneas que distribuyen los ítems de menú horizontalmente. Abrimos el documento y le añadimos:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #111;
}

ul.topnav li a.active {
  background-color: #04AA6D;
}

ul.topnav li.right {
  float: right;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right, ul.topnav li {
    float: none;
  }
}

Este código define una clase llamada "topnav" que da estilo a una lista de ítems (ul li). Si bien el menú está alineado a la izquierda, la clase "right" hace que un ítem del menú se muestre a la derecha. La clase "active" hace que la página donde se está aparezca verde en el menú de navegación.

Guarda los cambios, refresca la página en el navegador y mira qué cambio más radical. Para comprobar que el menú es responsivo, pulsa control+M y selecciona un dispositivo.

Continuar

Si tenemos muchos apartados, podemos añadir un desplegable a nuestro menú.
Menú desplegable