Barra de navegación de CSS

Demostración: barra de navegación

Barra de navegación vertical

Barra de navegación horizontal


Barra de navegación

Una navegación fácil de usar es muy importante para cualquier sitio web.

Al usar CSS, puede transformar un menú HTML aburrido en una barra de navegación atractiva.

Barra de navegación = lista de enlaces

La barra de navegación necesita un HTML estándar como base.

En nuestro ejemplo, construiremos la barra de navegación utilizando la lista estándar de HTML.

La barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> es muy significativo:

Ejemplo

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Noticias</a></li>
  <li><a href="contact.asp">Contacto</a></li>
  <li><a href="about.asp">Acerca de</a></li>
</ul>

Prueba personalmente

Ahora, elimina los puntos suspensivos y los márgenes externos e internos (relleno) de la lista:

Ejemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Prueba personalmente

Explicación del ejemplo:

  • list-style-type: none; - Eliminar los puntos suspensivos. La barra de navegación no necesita marcadores de lista.
  • Configurar margin: 0; y padding: 0; Eliminar la configuración predeterminada del navegador.

El código en el ejemplo anterior se utiliza en barras de navegación vertical y horizontal estándar, y aprenderás más sobre esto en el siguiente capítulo.