Menú desplegable en Dreamweaver

 Menú desplegable en Dreamweaver
Nombre: Patricia Landa
Creando una tabla para las casillas

Lo primero que necesitamos es una tabla donde estén encapsuladas, por decirlo de una manera, todas las casillas o secciones de nuestro menú.

Haz clic en la herramienta Tabla de la pestaña Común en la sección de Insertar.

*También puedes hacer clic en INSERTAR>>TABLA o tecleando CTRL +ALT+TEn la pantalla que te aparece a continuación coloca en la casilla Columnas cuantas secciones tenga tu menú principal (no el emergente), voy a colocar 5 columnas para cinco secciones, el resto modifícalo como en la imagen.

Lo que necesitamos hacer ahora es darle un ancho y un alto a cada celda para que almacene nuestras imágenes del menú.

Para hacerlo haz clic dentro de la primera columna y enla sección de Propiedades (CTRL+F3), configura el ancho y el alto de la primera celda. Cada celda mía va a tener 100px de ancho y 20 de alto.

Repite el paso anterior con cada celda de tu menú, hasta que veas en la sección de diseño algo como lo que muestro





Insertar capas dentro de celdas
Vamos ahora a insertar una capa dentro de cada celda, no importa el tamaño, en este primer casolo que nos importa es que el código de la capa quede dentro de la primera celda.

Selecciona Insertar>>Objeto de diseño>>Capa

Arrastra la capa que creaste hasta la primera celda, para asegurarte que está dentro de la celda ve a la pestaña Código y verifica que tengas algo como esto:

Teniendo seleccionada la capa, ve nuevamente a las Propiedades (CTRL+F3) y configúrala de la siguientemanera:



Importante que las casillas Iz y Sup estén vacías, así como An y Al correspondan al ancho y alto de la celda respectivamente.

Repite este paso hasta que insertes capas en el resto de las celdas, recuerda que por seguridad verifica el código para asegurarte que estén insertadas dentro de las celdas.

Hasta ahora tu código se debe ver algo así:

Y en la pestaña diseño debes veralgo como esto:

*Obvia los espacios superiores que se ven entre las celdas y las capas puesto que se eliminan en la vista desde el explorador.

Insertando las capas que van a ser desplegadas
Lo que necesitamos ahora es crear las capas que van a contener las secciones que serán desplegadas al pasar el mouse sobre la primera celda.

Crea una nueva capa (Insertar>>Objeto de diseño>>Capa) ydibújala debajo de la primera celda que creaste, nuevamente no importa el tamaño ni la colocación exacta que tenga la misma.

Presiona F2 y va a salir una sección llamada Capas. La última capa que creaste debe ser “Layer6″, selecciona y dejando la tecla CTRL presionada, colócala sobre “Layer 1“, debes tener algo como esto:

Mientras tienes seleccionado tu “Layer 6” modifica sus propiedades (CTRL+F3)de la siguiente manera:

*Importante que Iz este vacío, que Sup contenta el valor del alto de tu celda principal, que An contenga el ancho de tu celda principal y que Al contenga el número de celdas que se van a expandir multiplicado por el valor del alto de tu menú principal, en este caso, voy a hacer que se desplieguen dos secciones, y sería 2 celdas x 20px= 40px. Si en el tuyo se despliegan6 secciones, sería: 6 celdas x 20px= 120px.

Repite el paso 3 hasta que tengas todas las secciones que van a ser desplegadas, tu pestaña de capas se debe ver así:

Y tu sección de diseño se debe ver así:



Insertando tablas dentro de las secciones desplegables
Lo que necesitamos hacer ahora es insertar tantas tablas como configuramos el alto de las capas, recuerden que dentro de laprimera capa lo configuramos para 2 secciones, entonces insertamos una tabla dentro de la capa desplegable 1, configurándola de la siguiente forma.

Seleccionamos en la primera celda que insertamos y en la pestaña propiedades (CTRL+F3) la vamos a configurar de la siguiente forma:

Hacemos lo mismo con la segunda celda.

Insertamos el resto de las tablas en las siguientes capas desplegables,...