Crear un menú emergente

Necesito crear un menú emergente para mi página Web. ¿Cómo lo puedo hacer?

Podemos crear un menú emergente de forma muy sencilla en Fireworks y luego exportarlo a un html que podremos modificar en Dreamweaver.

Para ello abrimos Fireworks y creamos un nuevo archivo de las dimensiones del menú. Para ello accedemos al menú Archivo > Nuevo

Escribimos el texto del menú con la herramienta texto:

Por ejemplo:

Extendemos una zona activa para poder interactuar con el primer botón del menú (en nuestro ejemplo, sobre inicio)

Con la zona activa seleccionada accedemos al menú Modificar > Menú Emergente > Añadir menú emergente

En el editor de menú emergente escribimos los textos que van a aparecer en el menú y la página a la que estarán vinculados. En destino podemos indicar donde se va a mostrar la página vinculada, si no escribimos nada se mostrará en la misma ventana.

Pulsamos siguiente.
Elegimos el aspecto del menú, tanto si es horizontal o vertical, si utilizaremos de fondo una imagen o un color y el tipo y color de fuente:

Pulsamos siguiente:
En este paso podemos personalizar los bordes del menú, la sombra, etc.

Pulsamos siguiente
En el último paso seleccionamos la posición del menú, es decir, donde se va a mostrar

Pulsamos listo para finalizar

Observamos que hemos creado el menú:

Repetimos los mismos pasos para las demás secciones del menú.


Una vez creados todos los menús guardamos el archivo desde la opción Archivo > Guardar como por si tenemos que modificarlo posteriormente.

La extensión que tomará el archivo será .png

A continuación lo exportamos para crear una página html que contenga el menú. Para ello accedemos al menú Archivo > Exportar > elegimos HTML e imágenes.

Al exportarlo debemos guardar el archivo html en la carpeta de nuestro sitio web, se crearán un javascript .js, y varios gifs, uno de ellos corresponde al menú entero y los demás a cada botón creado en los distintos estados del menú.

Una vez creado el archivo html lo abrimos con Dreamweaver.

Desde Dreamweaver podemos modificar esta página html, que contiene el menú para crear una página web a nuestro gusto.

Redactado en: Dreamweaver