Tutorial – Maquetar una barra de navegación
Si ya hicisteis el tutorial para diseñar una barra de navegación profesional, a continuación pasamos a la maquetación de la misma y a darle la funcionalidad completa dentro de nuestra página web.
Aunque este tutorial lo podéis aplicar a cualquier diseño que hayáis hecho, si queréis podéis descargar el archivo .PSD del tutorial anterior y continuar con los pasos que os dicto a continuación.
Empezaremos guardando nuestro .psd como imagen para web, para conseguir una buena optimización para los navegadores. Por ejemplo lo guardaremos como .jpg o .png
Una vez guardado, tendremos que ir recontando uno por uno los botones de la barra de navegación, en sus dos modalidades.
Una vez los tengamos todos recortados pasamos al código y a las funcionalidades.
Aquí teneis el HTML:
Como podreis ver en el HTML se han usado listas desordenadas con los siguientes parámetros:
<li id=“nombre”><a href=“enlace” onmouseover=“image0.src=‘ruta de la imagen del botón pulsado’;” onmouseout=“image0.src=‘ruta de la imagen del boton sin pulsar‘;”> <img name=“image0″ src=”ruta del la imagen del boton sin pulsar”></a> </li>Esto cambiará en el archivo javascript el código de ruta de la imagen que queramos mostrar, según esté el ratón sobre la imagen o no lo esté.
Por ejemplo:
onmouseover=“image0.src=‘ruta de la imagen del botón pulsado’;”Cuando el ratón este encima =”cambiamos el valor image0.src=ruta de la imagen pulsada”;
onmouseout=“image0.src=‘ruta de la imagen del boton sin pulsar‘;”Cuando el ratón se quite de encima=cambiamos el valor image0= por la ruta de la imagen sin pulsar;
<img name=“image0″ src=”ruta del la imagen del boton sin pulsar”>El valor por defecto de la lista desordenada es=image0 la ruta de la imagen sin pulsar.
Ahora pasaremos al código Javascript:
image0.src = “ruta imagen por defecto”;
En el javascript crearemos la variable imagen0 y en la segunda linea asignaremos como valor a esa variable la imagen sin pulsar del boton que queramos.
Ahora pasaremos al CSS donde básicamente debemos mostrar la lista como horizontal y no mostrar ningun tipo de borde o espacio entre los <li>.
Aplicados estos códigos en sus correspondientes archivos y siempre prestando atención a que las rutas de los mismos sean correctas, ya estaría terminada nuestra maquetación, y ahora solo deberiamos integrar estos códigos en nuestra página web.
Si quereis ver el ejemplo terminado y funcionando | VER EJEMPLO
Si quereis descargar los archivos mencionados en el tutorial | Html+Css+Js+imagenes
Un saludo a todos y gracias por leerme.
