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:
Vamos a utilizarlo para
introducir en él la barra de navegación. Usaremos una lista con viñetas.
Primero borramos la frase que ha aparecido por defecto en el wrapper. A continuación
procedemos. En el inspector de propiedades, parte
inferior de la pantalla, hacemos clic en el botón lista sin ordenar:
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:
#navegación li a:hover {
color:
#fff;
background-color:
#333;
}
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.
