EstiloCSSTutoriales y tips en español

RSS

Cómo crear una barra de navegación en HTML y CSS

Por Iván Bustos en . Actualizado: 26/5/2011. Visitado 2281 veces. Compartir en LinkedIn

PobreExcelente 

Basado en 4 votaciones.

Iván BustosIván Bustos, un desarrollador web en Colombia con más de 10 años de experiencia en el desarrollo de experiencias en línea, enamorado de los estándares web y del poder de JavaScript. Fundador de Estilocss.com y creador de IBForm.

Aprenda más en:
http://www.ivanbustos.com

Dificultad: Principiante.

Requerimientos: No hay requerimientos para seguir este tutorial.

Tiempo estimado para completar: 20 minutos.

Página 1 de 1

Como desarrolladores web, a menudo nos encontramos con la necesidad de crear barras de navegación (también llamadas barras de paginación) que nos permitan limitar el contenido mostrado en una página con el fin de facilitar la navegación del contenido. Esta técnica se ha convertido en un modo de navegación aceptado desde los inicios del Internet lo que ha permitido que todos los internautas del Internet les resulte familiar.

Barra de navegación

Aunque el uso más común de las barras de navegación suele ser en blogs con el fin de navegar por todas las entradas del mismo, también pueden ser usados para facilitar la navegación de cualquier tipo de información. Al momento de crear EstiloCSS.com, implementé mi barra de navegación para poder mostrar sólo hasta 12 tutoriales por pantalla con el fin de no saturar demasiado el diseño del sitio.

Creando el HTML de nuestra barra de navegación

Es fácil crear dichas barras de navegación de una manera verdaderamente semántica. Es decir, haciendo uso correcto de las etiquetas HTML sin necesidad de tablas ni el uso exagerado de etiquetas innecesarias.

Para seguir este tutorial fácilmente, tendrás que tener ciertos conocimientos básicos tanto de HTML como de CSS. Este tutorial asume que manejas conceptos básicos en ambas tecnologías y no enseña lo básico.

En este tutorial crearemos una sencilla (pero atractiva) barra de navegación como la siguiente:

Resultado final barra de navegación

Si quieres ver un ejemplo en vivo por favor haz clic aquí.

Antes que nada sin embargo, debemos hacer lo primero. Crear nuestro el esqueleto de nuestro HTML.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.    <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.       <title>Barra de navegación</title>
  6.    </head>
  7.    <body>
  8.       
  9.    </body>
  10. </html>

Ya que hemos creado el esqueleto de nuestro HTML, pongámonos manos a la obra. Ahora lo que tenemos que hacer es nuestra barra de navegación. Sin embargo, ¿cómo podríamos definir nuestra barra de navegación en términos de HTML?. Una barra de navegación no es más que una lista de hipervínculos. Ahora, ¿se tratará de una lista ordenada, o sin orden?. Definitvamente no hace falta que la ordenemos ya que el contenido de cada item será un número que visualmente, automáticamente organizará el contenido.

Después de este mini análisis hemos decidido que la mejor opción es hacer uso de la etiqueta <ul> para definir nuestra lista. Dentro de cada item que contenga nuestra lista, encontraremos el número de la página encerrado por supuesto en una etiqueta ancla <a> que permite navegar al destino respectivo.

Con fines de este ejemplo, digamos que la página 3 es la página que actualmente está siendo visitada. Por esta razón, el item 3 de la lista realmente no necesita ser un hipervínculo, pero si queremos resaltarlo un poco y tal vez hacerlo diferente visualmente de los otros items. En este caso, en lugar de encerrar el número 3 en una etiqueta ancla <a>, lo encerraremos en una etiqueta <strong> por que nuestro fin es resaltar el número de una manera diferente.

Dentro de la etiqueta <body> agregamos el siguiente código:

  1. <ul>
  2.    <li><a href="#">Primero</a></li>
  3.    <li><a href="#">2</a></li>
  4.    <li><strong>3</strong></li>
  5.    <li><a href="#">4</a></li>
  6.    <li><a href="#">5</a></li>
  7.    <li><a href="#">Último</a></li>
  8. </ul>

Creando el CSS de nuestra barra de navegación

Antes de crear nuestro CSS, guarda el HTML que creamos anteriormente como index.htm. En la misma ubicación donde colocaste el archivo, crea uno nuevo y llámalo "barra.CSS".

Debemos incluir la referencia a nuestro archivo CSS en nuestro HTML. Justo después de la línea 4 del código mostrado anteriormente agregaremos la siguiente línea para incluir nuestro barra.CSS:

  1. <link rel="stylesheet" type="text/css" media="screen" href="barra.css" />

Veamos cómo luce nuestro HTML en este momento.

Progreso de creación de barra de navegación

¿Nada interesante cierto?

Lo primero que tenemos que hacer es deshacernos de las detestables bolitas. Es importante también quitarle cualquier margen que tenga por defecto. También queremos darle de una vez un buen color de fondo y como no queremos que el contenido esté tan pegado al borde de la caja que rodea nuestra <ul> le agregaremos un simple padding.

Abramos nuestro archivo barra.CSS e ingresemos allí el siguiente código:

  1. ul
  2. {
  3.    list-style-type:none;
  4.    padding:10px;
  5.    margin:0;
  6.    background-color: #BAC99F;
  7. }

Lo que dará como resultado algo parecido a lo siguiente:

Progreso de creación de barra de navegación

Es hora de mejorar los colores un poco. La idea es colorear todos los hipervínculos así como darles un color de fondo. Tambien queremos cambiar el color de fondo del item activo (el que está encerrado por la etiqueta <strong>). El color de este último debe ser diferente para que se note a simple vista que es esa la página activa.

Por último, queremos que al pasar el puntero del ratón sobre uno de los hipervínculos, el color de fondo de ellos cambie y que de repente aparezcan resaltados.

Justo al final del código anterior, agregamos lo siguiente:

  1. ul li a
  2. {
  3.    text-decoration:none;
  4.    background-color:#635A4E;
  5. }
  6. ul li a:hover
  7. {
  8.    background-color:#8A8966;
  9.    text-decoration:underline;
  10. }
  11. ul li strong
  12. {
  13.    background-color:#8A8966;
  14. }

Lo que resultará en algo similar al siguiente gráfico:

Progreso de creación de barra de navegación

Ahora lo siguiente es modificar el ancho de los contenidos de los items de la lista. Es decir, las etiquetas <a> y <strong>. Acá es importante resaltar que no queremos modificar el ancho de los items de la lista si no sus contenidos por que si hacemos lo anterior, las etiquetas <a> seguirían siendo pequeñas y no serían clicables en toda el área del item de la lista. Por esta razón, es una mejor práctica alterar el ancho de las etiquetas cuales sean siempre y cuando estén dentro de los items de la lista.

Ya que en este caso las etiquetas <a> y <strong> son inherentemente etiquetas en línea (es decir, no son bloques aparte como lo serían los <p> y los <divs> por ejemplo) es necesario decirle a nuestro CSS que las trate como etiquetas bloque. Esto nos permitirá poder cambiarles el ancho y el padding; cosa que de otro modo no sería posible (ya que no tiene sentido cambiarle el ancho y el padding a algo que se supone irá seguido de otro texto). La manera de decirle a nuestro CSS que trate a estas etiquetas como etiquetas bloque es através de la modificaciónn del atributo display de inline que es el valor por defecto para este tipo de etiquetas a block.

Ya como podemos modificar el ancho de las etiquetas, lo que queremos hacer en este ejemplo es darles tal vez un padding de 5px arriba y abajo, y 7 pixeles en los costados. En adición, sería bueno que les cambiaramos el color a blanco para que se noten más sobre el fondo. Véamos:

Justo al final del código anterior, agregamos lo siguiente:

  1. ul li a, ul li strong
  2. {
  3.    display:block;
  4.    padding: 5px 7px;
  5.    color: #FFF;
  6. }

Lo que resultaría en algo parecido a lo siguiente:

Progreso de creación de barra de navegación

Notarás que todos los items de la lista ahora tienen un ancho como cualquier objeto en bloque y esto se debe a que es el ancho (100%) que CSS les da por defecto a todos los objetos bloque.

Ya casi terminamos. Ahora lo que tenemos que hacer es flotar todos los items de lista hacia la izquierda. Al hacer esto, ya que ninguno de los items de la lista tiene un ancho establecido por nosotros sino un ancho automático, todos los items de la lista adquirirán el ancho de su contenido. En este caso, las etiquetas <a> y <strong> contenidas en ellos.

Justo al final del código anterior, agregamos lo siguiente:

  1. ul li
  2. {
  3.    float: left;
  4. }

Lo que resultaría en algo parecido a lo siguiente:

Progreso de creación de barra de navegación

Hemos terminado. Lo único que nos falta hacer es ajustar nuestro elemento contenedor ya que si te das cuenta, no cubre toda barra de navegación. Simplemente debemos ajustar su valor overflow a auto que soluciona el problema de mostrar barras de desplazamiento cuando no se necesita mientras que al mismo tiempo la capa contenedora envuelve perfectamente el contenido.

También en el último cambio, lo que haré es separar un poco los <a> y <strong> que están un poco muy pegados. Les daré una margen a la izquierda de sólo 2 pixeles.

El código CSS final es el siguiente:

  1. ul
  2. {
  3.    list-style-type:none;
  4.    padding:10px;
  5.    margin:0;
  6.    background-color: #BAC99F;
  7.    overflow:auto;
  8. }
  9. ul li a
  10. {
  11.    text-decoration:none;
  12.    background-color:#635A4E;
  13. }
  14. ul li a:hover
  15. {
  16.    background-color:#8A8966;
  17.    text-decoration:underline;
  18. }
  19. ul li strong
  20. {
  21.    background-color:#8A8966;
  22. }
  23. ul li a, ul li strong
  24. {
  25.    display:block;
  26.    padding: 5px 7px;
  27.    color: #FFF;
  28.    margin-left:2px;
  29. }
  30. ul li
  31. {
  32.    float: left;
  33. }

Los últimos cambios que realizamos se encuentran en la línea 7, y en la línea 28 del código anterior.

De esta manera, obtenemos el resultado final:

Resultado final barra de navegacion

Espero que hayas aprendido algo de este tutorial. Te agradezco por leer y espero tus comentarios.

El 23 de septiembre de 2011, javier franco dijo:

Excelente tutorial!

Haga clic en cualquier etiqueta para ver más tutoriales

EstiloCSS.com | Creative Commons License | Otro sitio más de Iván Bustoshttp://www.ivanbustos.com/Miami, FL 33166United States.