Barras de Navegación CSS

Tener una navegación fácil de usar es importante para cualquier sitio web. Con CSS se puede transformar un menú HTML aburrido a uno con muy buen aspecto.

Una Barra de Navegación implica Listas de Enlaces

Una Barra de Navegación requiere de HTML estándar como base. Una Barra de Navegación es básicamente una lista de enlaces, por lo tanto, usar etiquetas <ul> y <li> tiene un gran sentido.

En el siguiente ejemplo, vamos a crear una barra de navegación a partir de una lista HTML estándar:

<ul>
  <li><a href="iniico.html">Inicio</a></li>
  <li><a href="quienes-somos.html">Quienes Somos</a></li>
  <li><a href="noticias.html">Noticias</a></li>
  <li><a href="contacto.html">Contacto</a></li>
</ul>

A continuación se eliminan las viñetas, margenes y rellenos de la lista HTML con CSS:

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

La declaración list-style-type: none; elimina las viñetas de las etiquetas <li> anidadas a la etiqueta <ul>. En la mayoría de los casos las barras de navegación no necesitan las viñetas.

Las declaraciones margin: 0; y padding: 0; remueven el margen y relleno. Esto es necesario dado que los navegadores web asignan valores predeterminados a ciertas etiquetas y en este caso es necesario establecerlos a cero.

Este código de ejemplo es el código estándar para barras de navegación tanto verticales como para horizontales.

Barra de Navegación Vertical

Para crear una barra de navegación vertical, se le dan estilos a las etiquetas <a> dentro de las listas, especificándolas con nivel de bloque y con un ancho fijo. Esto en adición del ejemplo anterior explicado como código estándar para las barras de navegación:

li a {
  display: block;
  width: 60px;
}

La declaración display: block; especifica que el enlace tendra una visualización a nivel de bloque y hace que toda el área del enlace se pueda hacer clic y no solo al texto. Esto permite, si se desea, especificar el ancho, margen, relleno y altura como cualquier etiqueta de nivel de bloque.

La declaración width: 60px; especifica un ancho fijo, dado que las etiquetas de nivel de bloque toma todo el ancho disponible, queda fijado en 60 pixeles de ancho.

Se puede especificar el ancho a la etiqueta <ul> y eliminar la especificación de ancho a la etiqueta <a>, así, la etiqueta <a> que tiene un nivel de bloque tomara todo el espacio disponible que es el ancho especificado en la etiqueta <ul>, dado que esta anidada dentro de ella. Esto produce el mismo efecto que el ejemplo anterior en el siguiente código:

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

Ejemplos de Barra de Navegación Vertical

Creando una barra de navegación vertical básica con un color de fondo gris y cambia el color de fondo de los enlaces cuando se le pasa encima el puntero del mouse.

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:hover {
  background-color: #555;
  color: white;
}

Enlace activo o actual

Agregar un clase para los enlaces que llevan a la misma página actual, esto sirve para dar a conocer al usuario que se encuentra actualmente en esta misma página.

.activo {
  background-color: #4CAF50;
  color: white;
}

Enlaces centrados y agregar bordes

Agregar la declaración text-align: center; a la etiqueta <li> o a la etiqueta <a> para centrar los enlaces.

Agregar la propiedad border a la etiqueta <ul> agregará un borde alrededor de la barra de navegación. Si agregamos también la propiedad border-bottom a todos las etiquetas <li> con excepción del último con la propiedad border-bottom aplicada con la pseudo-clase :last-child:

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

Barra de Navegación Horizontal

Hay dos formas de crear una barra de navegación horizontal: ya sea por medio de elementos de lista en línea o flotantes.

Elementos de lista en línea

Una manera de crear una barra de navegación horizontal es especificando sus etiquetas <li> con visualización de nivel en línea. Esto en adición del ejemplo anterior explicado como código estándar para las barras de navegación:

li {
  display: inline;
}

La declaración display: inline; especifica las etiquetas <li> con visualización de nivel en línea, dado que la visualización predeterminada de nivel de bloque. Aquí, se eliminan los saltos de línea antes y despues de cada etiqueta <li> para mostrarlos en una línea.

Elementos de lista flotantes

Otra forma de crear una barra de navegación horizontal es especificando sus etiquetas <li> como flotantes y especificar un diseño para los enlaces de navegación:

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

La declaración float: left; en la etiqueta <li>, especifica que floten a su izquierda una al lado de otra. Esto dado que su visualización predeterminada es de nivel de bloque.

La declaración display: block; en la etiqueta <a>, especifica que los enlaces tienen visualización de bloque. Esto hace que toda el área del enlace se pueda dar clic y no solo a su texto, y permite que se le pueda aplicar ancho, alto, margen y relleno.

La declaración padding: 8px; especifica un relleno a cada etiqueta <a> para darle una estilo más agradable a los enlaces.

La declaración background-color: #dddddd; especifica un color de fondo para cada enlace.

Sugerencia: Agregar la declaración background-color: #dddddd; a la etiqueta <ul> en lugar de cada etiqueta <a> aplica a toda el área de la navegación, que produce el mismo efecto en nuestro ejemplo.

Ejemplos de Barra de Navegación Horizontal

Creando una barra de navegación horizontal básica con un color de fondo obscuro y cambia el color de fondo de sus enlaces cuando se les pasa encima el puntero del mouse.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

Enlace de navegación activo o actual

Agregar una clase para los enlaces que llevan a la misma página actual. Esto sirve para hacer notar al usuario en donde se encuentra actualmente.

.activo {
  background-color: #4CAF50;
}

Enlaces alineados a la derecha

Para alinear los enlaces a la derecha se declara float: right; pero en el siguiente ejemplo mantendremos el ejemplo anterior en donde los enlaces son alineados a la izquierda y solo el último enlace quedará alineado a la derecha:

<ul>
  <li><a href="iniico.html">Inicio</a></li>
  <li><a href="quienes-somos.html">Quienes Somos</a></li>
  <li><a href="noticias.html">Noticias</a></li>
  <li style="float: right"><a class="activo" href="contacto.html">Contacto</a></li>
</ul>

Bordes de división

Para agregar un borde de división, declaramos a las etiquetas <li> la propiedad border-right:

li {
  border-righit: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}