Barras de navegación

Tener una navegación fácil de usar es importante para cualquier sitio web. Con CSS puedes transformar menús HTML aburridos en atractivas barras de navegación.

Barras de navegación = Lista de enlaces

Una barra de navegación necesita HTML estándar como base. En nuestros ejemplos construiremos la barra de navegación a partir de una lista HTML estándar. Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene mucho sentido.

Ejm

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Ahora eliminemos las viñetas, los márgenes y el relleno de la lista, para ello utilizamos el siguiente código.

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

Ejm explicado:

  • list-style-type: none: - Elimina el marcador de lista. Una barra de navegación no necesita marcadores de lista.
  • Establecer margin: 0; y padding: 0; para eliminar la configuración predeterminada del navegador.

El código del ejemplo anterior es el código estándar que se usa en las barras de navegación verticales y horizontales.

Barra de navegación vertical

Para crear una barra de navegación vertical, puedes diseñar los elementos <a> dentro de la lista.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #ddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
</ul>
</body>
</html>

Ejemplo explicado

  • display: block - Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en toda el área del enlace (no solo en el texto), y nos permite especificar el ancho (y el relleno, el margen, la altura, etc., si lo deseas).
  • width: 60px - Los elementos de bloque ocupan todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 píxeles..

También puedes establecer el ancho de <ul> y eliminar el ancho de <a>, ya que ocuparán todo el ancho disponible cuando se muestren como elementos de bloque. Esto producirá el mismo resultado que nuestro ejemplo anterior.

Ejm

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

li a {
  display: block;
}

Ejm 1 de barra de navegación vertical

El código CSS que utilizaremos será el siguiente:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Cambia el color del enlace al pasar sobre el */
li a:hover {
  background-color: #555;
  color: white;
}

Ejm 2 - Enlace de navegación activo/actual

Agrega una clase "active" al enlace actual para que el usuario sepa en qué página se encuentra:

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

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

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Barra de navegación vertical</h2>
<p>En este ejemplo, creamos una clase "active" con un verde
color de fondo y un texto en blanco. La clase se agrega al enlace "Home".</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>

</body>
</html>

Centrar los enlaces y añadir bordes

Añade a <li> o a <a> el atributo text-align: center para centrar los enlaces. Agrega la propiedad border a <ul>, agrega un borde alrededor de la barra de navegación. Si también deseas bordes dentro de la barra de navegación, agrega un borde inferior a todos los elementos <li>, excepto al último.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

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

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Barra de navegación vertical</h2>
<p>En este ejemplo, centramos los enlaces de navegación
y agregamos un borde a la barra de navegación.</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Barra de navegación vertical fija de altura completa

Veamos un ejemplo de barra de navegación vertical fija.