Menu Desplegable con Dreamweaver

Cuando ordenamos el contenido de nuestra web, no existe mejor manera de hacerlo que con un buen menú que lo recoja todo y que permita subordinar uno con respecto a otro. Dreamweaver nos proporciona los llamados comportamientos de los elementos, vamos a combinar esta herramienta con un poco de HTML para lograr un simple pero bien visto menú desplegable.

Paso 1: 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+T

En 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 en la 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.

Paso 2: Insertar capas dentro de las celdas.

Vamos ahora a insertar una capa dentro de cada celda, no importa el tamaño, en este primer caso lo 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 siguiente manera:

*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 ver algo 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.

Paso 3: 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) y dibú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 despliegan 6 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í:

Paso 4: 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 la primera 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, dándoles la misma propiedad que coloque anteriormente, nuestro diseño nos quedaría así:

Paso5: Insertando el contenido de las secciones

Lo que falta ahora es colocar el nombre de las secciones para que lo usuarios sepan cual va a ser cada sección del menu, pueden hacerlo con imágenes o con texto.

Yo lo voy a hacer con una imagen para todas las secciones, puedes crear tantas como necesites, aquí mi imagen:

Voy a insertar esta imagen para todas las secciones, así debería quedar mi espacio de diseño.

Paso 6: Ocultando capas desplegables

Ahora debemos ocultar las capas que van a se desplegadas, para eso selecciona la primera desplegable (Asegúrate que esta seleccionado el borde azul) y en las propiedades coloca lo siguiente:

Al hacer eso, la capa desplegable 1 debió desaparecer de tu espacio de diseño. Has lo mismo con las otras 4 secciones desplegables de manera que tu espacio de diseño quede así:

Paso 7: Añadiendo links a las imágenes principales

Selecciona la primera imagen del menú y en el espacio de las propiedades añade en la sección vínculos un numeral “#” que representa un link blanco (No re direcciona a ninguna página).

*Has lo mismo con las otras 4 secciones del menú

Paso 8: Añadiendo los Comportamientos

Lo que debemos hacer ahora es agregar los comportamientos que muestren u oculten las capas desplegables.

Selecciona la primera imagen del menú y en la parte de abajo de tu diseño vas a tener una ruta que indica que sección HTML estas seleccionando, haz clic en <a>.

Haz clic en Ventana>>Comportamientos para abrir la pestaña de comportamientos.

Haz clic en el botón + de la pestaña de comportamientos y selecciona Mostrar/Ocultar capas

Lo que debes hacer ahora es configurar el recuadro que se abre de la siguiente manera

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Mostrar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Ocultar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

*Lo que estamos haciendo es mostrando la capa correspondiente al primer link y ocultando el resto.

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice <A> onClick y cámbialo a <A> onMouseOver.

Selecciona la segunda imagen y donde esta la ruta HTML selecciona la etiqueta <a>, ve a Comportamientos>>+>>Mostrar/Ocultar Capas y configúralo así:

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Ocultar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Mostrar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice <A> onClick y cámbialo a <A> onMouseOver.

Has lo mismo con las capas desplegables 3, 4 y 5, Mostrando y ocultando según sea el caso.

Paso 9: Ocultando las capas después de abiertas

Hasta ahora las capas no se van a cerrar a menos que pases tu mouse sobre otra sección del menú, para permitir que se cierren con un click  vamos a hacer lo siguiente:

En la ruta de dirección HTML selecciona la etiqueta <body>

Ve a la sección Comportamientos>>+>>Mostrar/Ocultar Capas y modifícalo de la siguiente manera:

Capa “Layer1″

Capa “Layer6″ en capa “Layer1″ (Ocultar)

Capa “Layer 2″

Capa “Layer7″ en capa “Layer2″ (Ocultar)

Capa “Layer 3″

Capa “Layer8″ en capa “Layer3″ (Ocultar)

Capa “Layer 4″

Capa “Layer9″ en capa “Layer4″ (Ocultar)

Capa “Layer 5″

Capa “Layer10″ en capa “Layer5″ (Ocultar)

En la pestaña comportamientos debes tener una nueva línea de comportamiento, selecciona donde dice onLoad y cámbialo a onClick.

Paso 10: Modificaciones

Si necesitas hacer modificaciones al menú desplegable, como por ejemplo, añadir links a las secciones, ve a la pestaña Capas (F2) y haz clic en el ojo que tienen los “Layers” para Mostrar/Ocultar las capas.

*Recuerda que al finalizar las modificaciones, deben estar todas las sub-capas ocultas

Vamos ahora a quitar un molesto borde punteado que sale al hacer clic sobre las secciones del menú. Para eso ve a la pestaña Código y sube hasta donde está el css y agrega lo siguiente:

Listo, con esto debes terminar tu menú desplegable, pronto voy a hacer otro con un menú vertical, que básicamente es lo mismo solo que las capas van organizadas de manera horizontal.

Quizas alguna de estas entradas te pueda interesar

• Tema para WordPress desde cero (Capitulo 6)
• Crear Menu Emergente con Dreamweaver
• CSS Para principiantes (Capitulo 1)
• Crear Sistema de Ingreso de Usuarios sin bases de datos (4ta Parte)
• Tema para WordPress desde cero (HTML)

20 Comentarios en "Menu Desplegable con Dreamweaver"

1. 

   light

   26 julio 2009

   Respuesta

   ajajajajajajja o__O las fans d mijael

2. 

   Mijael166

   26 julio 2009

   Respuesta

   Jejejeje sapo!! estas perdido rata!! ve si apareces por el msn o algo!

3. 

   Isa

   6 agosto 2009

   Respuesta

   ¿Y si se hace con imágenes queda igual?

4. 

   mijael

   7 agosto 2009

   Respuesta

   No se a que te refieres con imagenes…..de hecho ese lo hice con puras imagenes….no se si te refieres a otra cosa puedes preguntar otra vez :P

5. 

   Isa

   8 agosto 2009

   Respuesta

   Nada nada Mijael olvídalo ha sido un lapsus jaja.
   Una duda que me ha surgido hoy, si yo quiero poner las imágenes de los “submenús” más chicas que las del “menú” ¿cómo lo hago?, porque nunca me ha dejado hacerlo, siempre he tenido que poner todas las imágenes del mismo tamaño, esto será mejor que te lo diga por msn, a ver si hoy que es sábado te pillo por allí.

6. 

   onyx

   10 agosto 2009

   Respuesta

   интересно читать, спасибо

7. 

   STARDOLL LATINO

   9 noviembre 2009

   Respuesta

   Una pregunta recien he entrado en esta pagina,,, me interesa el menu desplegable pero no se con que programa lo haces, me encantaria que me los explicaras.
   Atte. Chiara de Stardoll Latino.

8. 

   Mijael

   10 noviembre 2009

   Respuesta

   Respuesta al Comentario deSTARDOLL LATINO: Hola!! el unico programa que se usa para crear un menu emergente es el Macromedia Dreamweaver en este tutorial (obvio necesitas un programa como photoshop para hacer las imagenes del menu.) puedes revisar tambien el siguiente Videotutorial donde se explica tambien este tutorial pero en video :) http://www.skyandstars.net/crear-menu-emergente-con-dreamweaver/ saludos y sigue visitando la pagina :P

9. 

   Rodrigo

   14 noviembre 2009

   Respuesta

   Estimados, soy nuevo en esto.
   Hice una estructura de 4 marcos en el primero puse un banner y el menú emergente, el segundo lo dividí en 2 Izq. y Der. y el 4 queda abajo.
   el problema del menú es que no se muestra completo se despliega detrás de los marcos izq. y Der.
   Si alguien me puede explicar como hago para que el menú emergente de fireworks o de flash se quede sobre los marcos y no se esconda detrás de ellos sería fantástico.
   Agradezco mucho la ayuda.
   Muchas Gracias

10. 

    Mijael

    15 noviembre 2009

    Respuesta

    Respuesta al Comentario deRodrigo: Hola que tal?, recuerda que esta es una manera de hacer un menu simple, puedes probar escondiendo mas capas cuando pasas el mouse por encima, de manera que se escondan tambien las capas que te tapan el menu, aunque si quieres algo mejor, mi consejo es que busques una manera mejor de hacer el menu emergente, quizas con flash o con javascript.

11. 

    mirshass

    27 enero 2010

    Respuesta

    Hola!
    Me gustaría hacerte una pregunta que no tiene nada q ver con los menus emergentes, xo no he encontrado otro sitio donde hacertela.
    Mi pregunta es sobre la resolución de las páginas y sobre el hecho de que lo que yo coloco en Dreamweaver (sean fotos, texto o lo que sea), cuando lo voy a mirar en el navegador de internet (Firefox, por ejemplo), me sale todo descolocado si lo comparamos con como lo tenía en Dreamweaver.
    Lo que quiero saber es:
    1. Esto es normal?
    2. Si lo es, que referencias tomas tú para que se quede todo tal y como lo has colocado, sin que luego se te mueva todo en el navegador? (Por ejemplo: puse un texto encima de una imagen en DreamWeaver, y cuando lo fui a ver en Firefox me salia mucho más a la derecha de lo que yo lo había colocado, tanto que incluso me salía cortado).
    Espero que hayas logrado enterder lo que te digo.
    Muchas gracias de antemano.

12. 

    Mijael166

    27 enero 2010

    Respuesta

    Hola mirshass, puedes dejar las preguntas aqui si no encuentras donde mas, no hay ningun problema.

    Vamos a ver, primero que nada es totalmente normal que las vistas de tu pagina en el Dreamweaver no coincidan con la vista en el explorador en muchos casos. Ahora te digo lo que hago yo para evitar ese problema:

    1- NO trabajo con la vista de “diseño” que da el programa sino de una vez trabajo con la vista de codigo, quizas si no tienes mucha experiencia en HTML esto no sea muy recomendable.

    2- Cuando trabajaba con la vista de diseño, NO me guiaba por la vista en el Programa sino que cada cambio que hacia lo testeaba en el explorador a ver que tal se veia.

    3- Si haces todo primero en tu programa de diseño, por ejemplo photoshop, selecciona los pixeles correspondientes a los espacios entre imagenes para asi poder ubicar sin ningun tipo d error tus textos. aqui te dejo un link a un pequeño videotuto de lo que te quic decir: http://vimeo.com/4776149

13. 

    Eddie Huaman

    19 junio 2010

    Respuesta

    Sois lo más Mijael, no sabes cuanto deseaba este dato, me habeis ayudado un montón, así mis webs se van a ver mucho más profesionales. ¡Grande Tio!
    Gracias por compartir esta inforamción, que os vaya bien.

14. 

    guiem

    28 julio 2010

    Respuesta

    uso el dw cs3 y en “insertar-odjetos de diseño” no estan las capas y de entrada no he sido capaz de encontrarlas.
    He obtado por mirar el codigo que has usado para la demo y la he copiado y pegado en wd y perfecto rectifico el codigo a voluntad y de maravilla. Gracias lo andaba buscando de haca tiempo.

    • 

      Palmaconi

      30 agosto 2010

      Respuesta

      Para Guiem: Insertar / Objetos de diseño / Div PA
      Div PA son las capas

15. 

    guiem

    28 julio 2010

    Respuesta

    solo una pega, no se ciera el menu al retirar el puntero de encima. Si alguien sabe como solucionarlo, seria de agradecer.

    • 

      Mijael166

      28 julio 2010

      Respuesta

      Es cierto, no se cierra al quitarles el mouse, no encontre la forma, intente y no lo consegui (al menos con los comportamientos que trae el dreamweaver)

    • 

      Palmaconi

      30 agosto 2010

      Respuesta

      Para guiem
      Asi como pusiste el comportamiento OnmouseOver para ver algunas y ocultar otras, creas otro comportamiento en cada menú que diga OnmouseOut y le pones ocultar a las capas de submenus

16. 

    Palmaconi

    30 agosto 2010

    Respuesta

    Estoy necesitando con urgencia hacer un menu desplegable vertical. En Javascript y divs es un lío y este esquema en DW es mas sencillo. Cuando podras darnos instrucciones como esta?

17. 

    Mijael

    2 septiembre 2010

    Respuesta

    Hola man, en skyandstars tenemos un videotutorial donde lo hacemos en vertical http://www.skyandstars.net/crear-menu-emergente-con-dreamweaver/ ahi el link