Barra de navegación CSS

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.