El tan buscado menú desplegable:

Este tutorial va a mostrar cómo se hace el tan buscado menú desplegable (pulsa aquí para ver la demo). Primero vamos a ver qué necesitaremos para el tutorial:

Utilizaremos 4 capas:

• general: que será la que contenga los botones principales.
• menu1: será el desplegable del boton del primer menú
• menu2: será el desplegable del segundo botón
• cierre: será la capa encargada de cerrar los desplegables

Vamos a ir adelantando algo: El orden de visibilidad de las capas (el llamado z-index) debe ser el orden en el que las he puesto arriba:la capa superior será "general" y la inferior será "cierre"; por el medio se encontrarán las capas "menu1" y "menu2". En el tutorial lo veréis con más detalle.

También utilizaremos 5 archivos de imágenes:

• butmenu1: es el nombre de la imagen que representa el boton del menú 1. Se compone de 2 archivos, uno para cada estado
  :
• butmenu2: es el nombre para los archivos del menu2:
  
• shim.gif: es un gif transparente

OJO: no confundir el nombre de la imagen con el nombre del archivo: las imágenes pueden tener nombre (aunque no suele ser muy habitual ponérselo). Pueden ser útiles cuando queremos acceder a ellas desde un script, por ejemplo.En este caso vamos a darles nombre para distinguirlas mejor cuando empecemos a aplicar comportamientos... y veremos dónde hay que escribir el nombre.

Fe de Erratas: En el tutorial veréis que a veces llamo botmenu1 ó botmenu2 a butmenu1 y 2 respectivamente. Es fallo mío: se refieren a lo mismo (me dí cuenta cuando terminé de compilarlo, lo siento)

LINKS
Este tutorial está basado en el de projectseven. Es muy recomendable visitarlo porque, aparte de mostrar de una forma más completa lo que aquí se ve, tiene una segunda parte muy interesante: que el contenido de los menús sea recogido de una base de datos utilizando Ultradev!!!

Y ahora, el tutorial