Toda página que se precie dispone de una  barra de navegación que permite navegar a otras páginas con un simple clic. En esta entrada nos proponemos crear una barra de navegación. Vamos a trabajar con Dreamweaver CS5. Utilizando html y CSS podemos hacerlo también. En EstiloCSS también podemos ver un buen ejemplo de como crear una. Nos da una estimación del tiempo que puede costar.

Crearemos un div en primer lugar. Lo haremos de la siguiente manera:

Automáticamente tendremos en nuestra hoja la ventana Insertar etiqueta div que nos pide un id o un class. Rellenamos el id:

Pulsamos en aceptar. Automáticamente tenemos el div creado:

Ahora escribimos los distintos elementos de la lista. Por ejemplo podemos dejarla así:

Le vamos a poner como id navegación. Pulsamos en dividir para ver el código de la página y escribimos dentro de la etiqueta ul lo siguiente:

A cada elemento de la lista le ponemos un enlace a cada página con la etiqueta a. Hacemos clic en el primer elemento de la lista, inicio. En el inspector de propiedades nos colocamos en vínculo y escribimos la dirección de la página a la que nos debe llevar el enlace. Procedemos con el resto de puntos de la lista del mismo modo. Con inicio hemos hecho referencia a index.html, la página de entrada del sitio que estamos construyendo.

Si queremos que la página destino del enlace aparezca en otra ventana podemos elegirlo dentro de destino seleccionando _blank:

Lo dejamos en blanco. Creamos los enlaces del resto de la lista. Seleccionamos cada uno y en vínculo escribimos la página correspondiente. La lista queda ahora así:

Dentro del código, nos colocamos en el id navegación con un clic. Ahora vamos al panel de CSS para insertar una Nueva Regla pulsando en la parte inferior del mismo tal como muestra la imagen:

Que nos lleva  a la ventana:

Damos a aceptar, y estamos en condiciones de establecer los valores que nos interesan. Vamos a cuadro dentro de categoría:

En float seleccionamos left para que flote a la izquierda, que hará que se coloque en la izquierda de la pantalla.

Avanzamos, en la vista código hacemos clic en el li de inicio e insertamos una nueva regla css.

Seleccionamos ahora la categoría lista donde modificaremos la propiedad list-style a none para quitar las viñetas.

Nuestra lista se muestra ahora  así, con los cambios realizados:

Además, rompe la estructura lista sin ordenar. Para quitar el subrayado pondremos la propiedad text-decoration a none. Colocamos en el código el cursor en la primera etiqueta a de la lista navegación. Añadimos una nueva regla css:

Pulsamos en aceptar.

Pero los enlaces todavía siguen juntos. En la categoría bloque le aplicamos el valor block a la propiedad Display. El resultado en la página es el siguiente:

Contacto ha quedado debajo de Inicio. Debemos reducir la anchura. Cambiamos los 400 pixeles que hemos puesto por 300 pixeles. Guardamos el cambio y refrescamos la página. Ya tenemos lo que queríamos:

Resumiendo, los estilos aplicados para la barra de navegación son los siguientes:

Para cambiar de color el texto y el fondo de los enlaces añadimos un efecto hover. Nos colocamos en a, añadimos una nueva regla css, y en la ventana añadimos dos puntos y escribimos la palabra hover:

Modificamos las propiedades del color de fondo y color del texto para obtener un resultado cuando colocamos el cursor, por ejemplo, en portfolio:

Al código css le hemos añadido las siguientes propiedades:

Si queremos saber un poco más sobre hover librosweb nos puede ayudar a realizarlo con soltura. Para que se quede esto bien, es interesante practicar. En desarrolloweb tenemos otro ejemplo para practicar  la creación de otro tipo de barra de navegación.