Bhyma

Tutorial Menu Deslizante

Ver ejemplo

Materiales:

Dentro de los materiales encontrarás una página: "menudesliza.htm"

Abre esa página con tu programa Dreamweaver, o el que acostubres usar.yo he puesto el fondo liso y los colores de los bordes y el menu en gris y blanco, puedes cambiarlos facilmente para adecuarlos a tu diseño de página.

Tienes que subir la carpeta llamada menu_archivos, en el mismo directorio donde vayas a subir tu página; La carpeta contiene los archivos necesarios para que funcione el script, puedes ver el enlace a ese archivo en tu código, aqui:

(he hecho las capturas procurando que se viera el número de orden de la fila, a la izquierda, para que puedas encontrar más facilmente todo)

La situación de los cuadrados que contienen los menus, está ajustada al mismo lugar, pero se puede variar la situación cambiando estos valores:

Los cuadrados se deslizan hacia arriba=up

hacia la izquierda= left

hacia la derecha =rigth

y hacia abajo= down

También lo puedes cambiar para que aparezcan desde donde mejor se vean en tu diseño.

El color del fondo y los bordes del cuadrado están aqui:

yo he puesto los bordes blancos y el fondo gris #666666.

El color del texto dentro de los menus también se puede cambiar, aqui:

 

Para hacer la decoración, simplemente, escribes e insertas tus imágenes, por debajo de los menus que ves a la izquierda al abrir "menudesliza.htm".

Está todo prepradado para que pongas tus tutoriales, traducciones etc, sólo con cambiar la direccion del enlace.

Para añadir, más direcciones a la lista, tienes que copiar y pegar el código de un enlace, a renglón seguido, y la lista se irá llenando.

Aqui te pongo captura de cómo hacerlo:

cambiar la dirección asi:

Dentro de la carpeta menu_archivos, también va incluido el spacer.gif, es una imagen transparente que sirve para separar las lineas dentro del menu deslizante.

El enlace, lleva a una imagen, en este caso es una manzanita, el archivo se puede cambiar por el que te guste, simplemente guardándolo como gif, y metiéndolo dentro de la carpeta menu_archivos.

yo le he dado el nombre de boulet.gif, si lo guardas con ese nombre, no es necesario cambiar nada más, si lo guardas con otro nombre, deberás cambiar también el nombre en el código aqui:

Supongo que no pasa nada si la quitas, pero yo la hedejado.

Cuando tengas todo a tu gusto, los colores y las imágenes que hayas realizado para esa página, guardas tu nuevo código, con el nombre que quieras, index.html si es la portada, o cualquiera que vayas a utilizar, y lo subes todo junto con la carpeta menu_archivos.

El codigo htm va fuera de la carpeta menu_archivos

Abre tu página con el explorador, y reajusta la dirección o la situacion de los cuadrados del menu a tu gusto, y ya tienes un menu deslizante en tu web.

Si necesitas preguntar algo, puedes escribir aqui: