 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Creación de un menú desplegable en Dreamweaver
Explicación detallada sobre la creación de un menú desplegable en Dreamweaver, en el que poniendo el ratón en las diferentes opciones se muestran unas capas con opciones secundarias.
15/11/02 - Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar de nuestra página, en un menú, este abarcaría casi la totalidad del espacio que tenemos para nuestra web. En estos casos es muy útil insertar uno o varios de estos menús desplegables, apareciendo por encima del propio contenido de la página para mostrar todas sus partes y desapareciendo posteriormente.
A lo largo de este artículo vamos a desarrollar la forma de crear uno de estos menús con DreamWeaver de una manera genérica para que cada uno lo amplíe a su gusto.
En primer lugar, tenemos que saber que este menú está construido casi en su totalidad por capas, a las cuales les atribuiremos unos comportamientos específicos para que aparezcan y desaparezcan a nuestro gusto.
Otra cosa que debemos tener en cuenta es la condición de capa absoluta o capa relativa, ya que a las capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raíz de la esquina superior izquierda de nuestra web, coordenadas que no nos sirven para nada en el caso de que nuestra página tenga los contenidos centrados, ya que la posición en la que va a aparecer esta, dependerá de la configuración del monitor desde el que se visualice dicha página.
El primer paso que tenemos que dar es desarrollar mentalmente un esquema del menú que queremos realizar, o mejor, sobre papel. Nosotros nos hemos decantado por hacer un menú principal compuesto por 5 partes en posición horizontal, para lo cual crearemos una tabla con 5 celdas y les daremos a cada una de ellas un determinado el tamaño de píxel, en nuestro caso 100px - 20px. A continuación haremos clic en el icono de capa y dibujaremos una en cualquier lado, seguidamente arrastraremos el símbolo de capa (que determina el lugar donde el programa introducirá la línea de código HTML, que por defecto creará dentro de la etiqueta "Body") dentro una de las celdas de la tabla que hemos generado y a continuación modificaremos en la ventana propiedades, los campos "Iz" (izquierda) y "Sup" (superior) dejándolos en blanco, al hacer esto el programa engancha la capa en la esquina superior izquierda del recipiente en el que se encuentra, en este caso, la celda en la que hemos introducido la capa. Después daremos un valor a los campos de "An" (ancho) y "Al" (alto) En el ejemplo que estamos creando serán 100px y 20px respectivamente, este paso lo tenemos que repetir para cada una de las 5 celdas (en nuestro caso), de las que se compone nuestro menú principal.
Una vez terminado con este paso procederemos a crear otras capas dentro de las que ya hemos establecido, a estas capas tendremos que darles unos valores de tamaño dependiendo de las distintas partes que queramos introducir dependientes de cada menú (nosotros daremos 100px - 80px en el primer desplegable, 100px - 140px en el segundo, 100px - 100px en el tercero, 100px - 80px en el cuarto y 100px - 140px en el quinto). Para colocar una capa dentro de otra podemos hacerlo: 1º, arrastrando como hemos hecho anteriormente esta nueva capa dentro de la anterior, o 2º, presionando la tecla F2 nos aparecerá la ventana "capas" donde podremos ver un esquema de las capas que tenemos en nuestra web, cogiendo una de las capas que aparecen y arrastrándola encima de otra mientras que presionamos la tecla "ctrl", introduciremos la capa arrastrada dentro de la que hayamos seleccionado.
Estas subcapas que hemos creado, que dependen de las principales, por defecto tienen la propiedad "default" que deja la capa visible en todo momento y nos viene bien para trabajar, pero antes de darles un comportamiento a estas, cuando tengamos terminado por completo la estructura de nuestro menú, deberemos cambiar este tributo "default" de las capas secundarias (las que se encuentran dentro de las 5 capas principales) por "hidden", que las hace invisibles, dándonos la posibilidad de trabajar con los comportamientos haciéndolas aparecer y desaparecer a nuestro gusto.
Dentro de estas capas secundarias introduciremos tablas con el numero de celdas que hayamos calculado con el tamaño de cada capa. Una vez hecho esto en todas las capas deberíamos colocar las imágenes o las palabras de nuestro menú para poder configurar los comportamientos, ya que si no colocamos nada dentro de las capas, estas no se verán cuando aparecen o desaparecen por ser transparentes. Otra solución es darles un color de fondo.
El último paso para terminar nuestro menú será dar a cada capa un comportamiento. Para eso necesitamos la ventana comportamiento que, si no la tenemos ya a la vista, presionando la tecla F3 aparecerá. Para poder jugar con los comportamientos de "mostrar u ocultar capa" debemos trabajar con un vinculo (estos vínculos serán las imágenes que hemos colocado dentro de las celdas y en su defecto las palabras, para hacer este vinculo introduciremos en el espacio reservado para los vínculos de la ventana propiedades el símbolo "#" creando así un vínculo en blanco, a continuación presionaremos el vinculo creado (en la parte inferior de la página principal aparecerá el símbolo de vínculo "<a>" en negrita) después iremos a la ventana comportamiento y presionaremos el símbolo "+" y pincharemos en "Mostrar - Ocultar capas" y nos aparecerá una ventana con un listado de todas las capas que tenemos creadas, lo que tenemos que hacer es presionar la capa que se tendría que desplegar cuando pasásemos el ratón por encima del vinculo que estamos modificando y apretar el botón "Mostrar" y las demás capas pincharlas y ocultarlas de la misma forma que hemos hecho antes pero en este caso apretando el botón de "Ocultar".
Este paso lo repetiremos para cada una de los cinco vínculos principales de los que se nos desplegarán los correspondientes submenús.
Seguir navegando a partir aquí:
+ 1 manual relacionado+ 2 categorias relacionadas
+ 28 comentarios (Añadir)
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de David Marín*
Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Talleres de diseño web
Siguiente: Colores y hojas de estilo que ayudan
Anterior: Navegabilidad, un factor fundamental
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en DHTML+ Entrar en Dreamweaver
Comentarios de los visitantes
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 28 comentarios revisados |
Comentario de Laura
21/1/03
He probado este menú y sin tener ni idea de dreamweaver me ha salido, pero ¿cómo puede ser que lo vea con IE 6 y con internet explorer 5 no? Es posible?
RESPUESTA
Puede que sea así, pero a mi también me estraña que ocurra eso, puesto que el modelo de objetos de IE5 e IE6 en principio es el mismo. Como es el Dreamweaver el que compone los scripts poco se puede hacer para hacerlo funcionar si no funciona ya...
Te recomiendo leer esta FAQ para encontrar otros modos de hacer un menú de este tipo: ¿Cómo se hace un menú desplegable dinámico como el que aparece en DesarrolloWeb?
Comentario de Carlos Crouseilles
12/2/03
He provado con este menú pero lo que pasa esque una vez que pasas el cursor por encima del botón que quieres que desplegue el menú ya se queda fijo. A mi me gustaria q apareciese y desapareciese, no que se que lo mostrase una vez y no vuelva a desaparecer.
Respuesta
Pues es cierto que se queda fijo, pero sólo habría que modificarlo un poco para que se pudiese ocultar. Eso lo podemos dejar para otro artículo en adelante. Si alguien que lo hace lo quiere enviar sería también bienvenido.
De todos modos, quería señalar que existen herramientas extremadamente útiles y sencillas para hacer menús. Podemos ver este tema más detenidamente en:
http://www.desarrolloweb.com/faq/145.php
http://www.desarrolloweb.com/articulos/839.php
Comentario de josé manuel
05/6/03
Para que desaparezca la capa que contiene la tabla con el menú solo hay que darle un comportamiento "mostrar-ocultar" con el evento "mouseout" y la capa se ocultará cundo el puntero salga de ella.
Comentario de Aoi
20/6/03
Para que desaparezca el menú al seleccionar otro diferente,ve a la opción Ocultar o Mostrar Capas, y ahi pon la Capa que quieres mostrar, y todas las que quieres ocultar al pasar por encima el raton.
He probado este ejercicio, y me ha salido a la primera, sin tener conocimientos. Es question de ir probando ^^. Saludos!
Comentario de Alberto Orellana
23/8/03
Hola..muy bueno el articulo... para ocultar el menu.. dentro del mismo vinculo donde lo muestras debes agregar otro comportamiento.."onmouseout" con la accion ocultar ocultar
... saludos... :-) Alberto Orellana
Comentario de GAbriel
07/10/03
Hola, quise realizar este ejemplo, pero no sale. Primero al presionar F3 no me aparece la ventana de comportamiento, es decir sin eso no puedo ver la opción de ocultar y mostrar capas. Lo estuve probando con Dreamw...MX, sera por eso.
Por favor tirame las lineas me gustaria implemantarlo en un sitio que poseo
Comentario de jenny
20/10/03
¿que es un menu desplegable?
RESPUESTA
Es una lista desplegable, un combobox, un campo select de formulario. No sé con qué más nombres se puede conocer.
Comentario de Jonathan
10/12/03
En dreamweaver MX, por lo menos la versión en español, la ventana de comportamiento se obtiene con las teclas MYÚS+F3, si esto no funciona puedes intentar desde el menu ventana y busca la opcion que diga "Comportamiento" ó algo así para que te visualize la pestaña, Nota: debe estar del lado izquierdo.
Comentario de Alejandro
12/12/03
Gabriel, lo que tiene que hacer para que le aparezcan los behaviors o comportamientos es presionar talvéz Shift+F3, o simplemente en Window/Ventana está para que lo active.
Comentario de
17/3/04
lo que tienes que hacer es checar primero que tengas las extensiones de comportamientos de tablas, no solo de links, y despues checar el tipo de navegador en los comportamientos
Comentario de FATIMA
22/7/04
He provado de hacer el menú desplegable con dreamweaver y me sale, pero en mi caso lo he intentado hacer saliendo de una imagen un poco grande , que es como a mi me interesa, y el menu me sale tapando la imagen y no de la parte inferior, no tapando nada.
Comentario de Noe
23/8/04
Hola a todos...excelentisimo articulo pero les quiero hacer una pregunta esa accion del MouseOut es un poco inestable porque si tan solo el mouse toca la tabla entre los link el Menu desaparece me podrian ayudar en ese aspecto de como hacer pasar el maouse por TODO el menu...Gracias ;)
Comentario de G.Joy Baqueiro A.
05/3/05
Menú Desplegable
Bien chicos estuve como tonta toda la tarde tratando de hacer lo que decía el artículo¡NUNCA TUVE RESPUESTA FAVORABLE EN DREAMWEAVER! Francamente les rendiré honores aquellas personas que lograron hacerlo.
Les comentaré como logre hacerlo y si es posible me dicen si tuvieron respuestas ¿va?
Antes de iniciar tienes que salvar tu documento, sino esto impedirá la ejecución de algunos comandos
1.Insertas el dibujo de tu boton en Dreamweaver MX
2.Te vas a la barra de menú Windows/Behaviors
(o solo presionas Shift + F3)
3.En BEHAVIORS presinas el signo de (+) abrirá las opciones
4. Seleccionas El Swap Image (Cargas el segundo botón en imagen que quieras que resalte) Te va a crear el Swap Image Restore...
5.En el mismo BEHAVIORS seleccionas una opción que dice SHOW POP-UP te cargará la ventana de diálogo
6.En la ventana de dialogo existe una pestaña que se llama CONTENTS en donde tienes que poner tu menú desplegable y direccionarle el link de la página que abrirá.
7. Lo demás es a tu cosideración, el color la posición etc.. lo que me gusto de este menú es que se esconde y aparece cuando lo socilitas con la flecha del ratón.
Bien chicos estuve como tonta toda la tarde tratando de hacer lo que decía el artículo¡NUNCA TUVE RESPUESTA FAVORABLE EN DREAMWEAVER! Francamente les rendiré honores aquellas personas que lograron hacerlo.
Les comentaré como logre hacerlo y si es posible me dicen si tuvieron respuestas ¿va?
Antes de iniciar tienes que salvar tu documento, sino esto impedirá la ejecución de algunos comandos
1.Insertas el dibujo de tu boton en Dreamweaver MX
2.Te vas a la barra de menú Windows/Behaviors
(o solo presionas Shift + F3)
3.En BEHAVIORS presinas el signo de (+) abrirá las opciones
4. Seleccionas El Swap Image (Cargas el segundo botón en imagen que quieras que resalte) Te va a crear el Swap Image Restore...
5.En el mismo BEHAVIORS seleccionas una opción que dice SHOW POP-UP te cargará la ventana de diálogo
6.En la ventana de dialogo existe una pestaña que se llama CONTENTS en donde tienes que poner tu menú desplegable y direccionarle el link de la página que abrirá.
7. Lo demás es a tu cosideración, el color la posición etc.. lo que me gusto de este menú es que se esconde y aparece cuando lo socilitas con la flecha del ratón.
Comentario de Ary
01/6/05
Una manera facil de insetar capas en una celda de la tablas es con solo seleccionar de la ventana objetos y arrastrar el cursor dentro de la celda y listo, no es necesario suprimir nada, solo en la ventana de propiedades de la capa se debe dejar en blanco las opciones Iz - Sup y listo, tu capa estara donde debe. Este comentario espero y sirva para Josó y no te preocupes solo hay que practicar, no sale a la primera te lo digo por experiencia. Suerte!
Comentario de Gloria
03/11/05
Realmente.... lamentable este pobre intento de creacion de un menu con layers... Para empezar, las celdas de la tabla no se comportan como contenedores... Hay errores, y ademas, no se explayan lo suficiente en los comentarios y en las instrucciones, por lo que no se termina entendiendo practicamente nada... Tienen que tener en cuenta que hay versiones de Dreamweaver en ingles y en español, tambien, por favor...
Comentario de Patricio Ramos
23/11/05
El ejemplo del que estamos hablando es súper bueno, lo que sí, está enfocado para gente que ya conoce algo de HTML y por lo menos algo conoce las etiquetas DIV y los estilos de estas.
Seguí el ejercicio paso a paso y me resultó sin problemas. También estuve buscando la forma de ocultar los submenues, lo cual encontré y quiero compartir con ustedes el siguiente código.
En el código se llama a la función hideOptions(), como su nombre lo dice oculta todas las opciones y se llama luego de evaluar el evento sobre que elemento realmente se originó. Porque si hay una etiqueta que envuelve a otra ejemplo un DIV y un TABLE, pasas el mouse sobre la tabla que está dentro del DIV y se gatilla el evento onmouseout del DIV, por lo tanto no sirve para ocultar en ese punto las opción.
La llamada a la función se debe colocar en la etiqueta del BODY para no estar poniendo el código por todos lados. Sería algo así.
<body onmouseover="over()">
La función over es de la siguiente manera, como ya había dicho la función hideOptions oculta todos los submenues que se requieren:
function over() {
if (navigator.appName != 'Netscape'){
if (event.toElement != null) {
if (event.toElement.tagName=='BODY') {
hideOptions();
} }
}
}
Suerte con esto y no se detengan ante cualquier dificultad que se les presente. Casi me daba por vencido y justo encontré la forma de implementar el bendito menú desplegable.
Saludos.
Seguí el ejercicio paso a paso y me resultó sin problemas. También estuve buscando la forma de ocultar los submenues, lo cual encontré y quiero compartir con ustedes el siguiente código.
En el código se llama a la función hideOptions(), como su nombre lo dice oculta todas las opciones y se llama luego de evaluar el evento sobre que elemento realmente se originó. Porque si hay una etiqueta que envuelve a otra ejemplo un DIV y un TABLE, pasas el mouse sobre la tabla que está dentro del DIV y se gatilla el evento onmouseout del DIV, por lo tanto no sirve para ocultar en ese punto las opción.
La llamada a la función se debe colocar en la etiqueta del BODY para no estar poniendo el código por todos lados. Sería algo así.
<body onmouseover="over()">
La función over es de la siguiente manera, como ya había dicho la función hideOptions oculta todos los submenues que se requieren:
function over() {
if (navigator.appName != 'Netscape'){
if (event.toElement != null) {
if (event.toElement.tagName=='BODY') {
hideOptions();
} }
}
}
Suerte con esto y no se detengan ante cualquier dificultad que se les presente. Casi me daba por vencido y justo encontré la forma de implementar el bendito menú desplegable.
Saludos.
Comentario de Leandro Pita
30/11/05
Para los que se están complicando con que el layer/capa queda fijo:
Este es el link:
<a href="#" onMouseOver="MM_showHideLayers('menu','','show')" onMouseOut="MM_showHideLayers('menu','','hide')">,
Bye.
Este es el link:
<a href="#" onMouseOver="MM_showHideLayers('menu','','show')" onMouseOut="MM_showHideLayers('menu','','hide')">,
Bye.
Comentario de Ángel
06/1/06
Efectivamente, todo se hace más o menos bien, con un poco de tiempo y paciencia pero, como se dice aqui arriba, las celdas no se comportan como contenedores, por lo que las capas quedan descuadradas si no lo hacemos manualmente, mucho más descuadradas aún si hacemos caso al artículo y en todas las capas (1) dejamos en blanco los atributos Iz y Sup
Comentario de oscar
08/3/06
bueno ps ami si me funciono el ejemplo, para quien quiere ABRIR UN ARCHIVO PHP en un frame y le aparece el dialogo de descarga del archivo es por que PHP NO ESTA BIEN CONFIGURADO EN EL SERVIDOR donde lo quiere abir. por lo tanto no corre los archivos con extension php. yo hago algunas paginas de internet, y siempre estoy tratando de aprender cosas nuevas, no soy profesional dejo mi correo para alguna duda deamn_123@yahoo.com.mx
Comentario de Marco
05/4/06
Igual les recomiendo algo para lo que no tenemos idea de esto ni somos webmasters. Se puede hacer lo mismo con el fireworks en vez de hacer todo este kilombo del menu deplegable....despues lo guarda como html y usan el frontpage (un word mas mejor :)...y listooo tienen ese maldito menu......AGUANTE FRONTPAGEE
Comentario de JREDHAT
15/6/06
NO SOY MUY BUENO PARA ANDAR PONIENDO COSAS ES LO SITIOS PERO, ESTA VES TENGO QUE COMPARTIR LO QU HE LOGRADO. MODIFIQUE UN POCO EL CODIGO PARA QUE REAMENTE ME APARECIERAN LOS SUBMENUS DE BEJO DEL MENU PRINCIPAL, UNICAMENTE AUMENTE LA ALTURA DE LAS CAPAS PRINCIPALES A 40px, LUEGO ANTES DE INSERTAR LAS CAPAS HIJAS AGREGUE UNA TABLA DE 1 COLUMNA Y 2 FILAS, AGREGANDO EN LA SEGUNDA FILA LA CAPA HIJA O CAPA CONTENEDORA DEL SUB MENU. LE HE PROBADO CON INTERNET EXPLORER 7 Y OPERA 9 Y LOS RESULTADOS FUERON BUENOS.
Comentario de erwin
22/7/06
se complikan muxo.pa k se okulte el submenu solo deben darle un doble comportamiento a kada boton.yo lo hice onmouseover y le di las capas k keria okultar o k iba a kedar y le di otro comportamiento kon onmouseout y le di hide a otdas las capas. asi de simple. saludos
Comentario de Adri
22/9/06
Como siempre un artículo perfecto.
Sobre el tema de hacer desaparecer el submenú sólo cuando toque, yo he utilizado esto:
<div id="Menu1" onmouseover="MM_showHideLayers('Submenu1','','show','Submenu2','','hide','Submenu3','','hide','Submenu4','','hide')" onmouseout="MM_showHideLayers('Submenu1','','hide')">
<div id="Submenu1" onmouseover="MM_showHideLayers('Submenu1','','show','Submenu2','','hide','Submenu3','','hide','Submenu4','','hide')">
No he utilizado el link en la imagen, en lugar de eso utilizo únicamente las capas. Pongo las capas generales visibles y las de los submenús como hidden. Cuando entras (con el ratón se entiende) en un campo Menú aparecerá el Submenú correspondiente y cuando salgas de él desaparecerá. Con esto nunca nos daría tiempo a entrar en los submenús. Y por ello la segunda sentencia que hace que si estás en un submenú éste no desaparezca.
Con esto puedes hacer todo tipo de menús.
Sobre el tema de hacer desaparecer el submenú sólo cuando toque, yo he utilizado esto:
<div id="Menu1" onmouseover="MM_showHideLayers('Submenu1','','show','Submenu2','','hide','Submenu3','','hide','Submenu4','','hide')" onmouseout="MM_showHideLayers('Submenu1','','hide')">
<div id="Submenu1" onmouseover="MM_showHideLayers('Submenu1','','show','Submenu2','','hide','Submenu3','','hide','Submenu4','','hide')">
No he utilizado el link en la imagen, en lugar de eso utilizo únicamente las capas. Pongo las capas generales visibles y las de los submenús como hidden. Cuando entras (con el ratón se entiende) en un campo Menú aparecerá el Submenú correspondiente y cuando salgas de él desaparecerá. Con esto nunca nos daría tiempo a entrar en los submenús. Y por ello la segunda sentencia que hace que si estás en un submenú éste no desaparezca.
Con esto puedes hacer todo tipo de menús.
Comentario de jesus
26/9/06
el articulo se ve bien, pero esta confusa la explicacion, se deberia usar mas grafica, utilizando ilustraciones en mismo dremweaver.
Gracias
Gracias
Comentario de Daniel
26/10/06
Bien chicos y chicas les dire que hacer los tan nombrados menus verticales es muy facil con el dreamweaver yo he podido hacerlo y les dire paso a paso como hacerlo... Lo unico es que tengo un pequeño problema que aun no he solucionado pero cuando lo hagan veran que resulta perfecto a exepcion de un minimo detalle que espero alguien pueda ayudarme a refrescar la mente y solucionarlo...
1.- Debes tener ya diseñado el boton que deseas mostrar en el menu principal, te aconsejo para darle un mejor efecto que hagas dos copias de ese boton, cada uno con colores diferentes.
2.- Creas una capa o un layer con la opcion de DIBUJAR CAPA en la vista estandar.
3.- Luego seleccionas la capa que acabas de crear y te vas al menu principal y seleccionas INSERTAR / Imagen... Que es lo mismo que presionar Ctrl+Alt+I.
4.- Seleccionas el archivo del boton que creaste teniendo en vuenta que si esta grabado con la extension .GIF mucho mejor.
5.- Una vez que hayas insertado la imagen del boton dentro de la capa, presionas Shift+F3
6.- Si te abras dado cuenta abrira a mano derecha la opcion de Etiqueta <Div> que contiene las pestañas de ATRIBUTOS - COMPORTAMIENTOS - CSS RELEVANT
7.- Ya cuando tengas seleccionada la capa en donde insertaste la imagen del boton te vas a la pestaña de COMPORTAMIENTOS y le das click al signo de +
8.- Seleccionas la opcion INTERCAMBIAR IMAGEN
9.- Te abrira una ventana en donde vas a seleccionar el otro boton con el otro color y presionas aceptar
10.- Le vuelves a dar click al sigono de + y seleccionas la opcion MOSTRAR MENU EMERGENTE
11.- Se te abrira una ventana con cuatro pestañas, en la primera de CONTENIDO podras insertar los elementos que quieres que muestre el menu pulsando el signo + y colocandole un nombre (texto), el vinculo que tendra ese sub menu y un destino a la hora de abrirlo.
12.- Puedes colocar alli tantos elementos como quieras que aparezcan, luego pasas a la pestaña de aspecto en donde podras definir si tu menu es vertical u horizontal y darle color a las celdas... Abra una ventana de ejemplo abajo donde podras ir viendo los cambios.
13.- En la pestaña de avanzado puedes configurara el tiempo que deseas que tarde en desplegarse tu menu y el margen del texto.
14.- Por ultimo en la pestaña de posicion defines la posicion relativa al menu inicial que quieres que se te despliegue, si es inferior superior o izquierdo o izquierdo inferior y dejas seleccionada la opcion de OCULTAR MENU CON EVENTO DE ONMOUSEOUT
15.- Si lo notaste hay dos cuadros de posiciones X & Y en donde podras manualmente despues configurar la posicion de tus ventanas, lo que queda es darle click a ACEPTAR y ya tienes tu menu desplegable
16.- Lo mismo lo puedes repetir con los distintos elementos que quieras que tengan un sub menu y estos a su vez pueden tener otrs submenus
Si sigues todos estos 15 pasos al pie de la letra tendras tu menu desplegable con un efecto de intercambio de imagen y color en los botones lo que lo haria mas vistoso... El inconveniente que les dije al principio es que cuando tengan un contenido y corran la pagina este se superpondra encima de los menus que se despliegan pero estoy seguro que entre todos podremos encontrar una solucion que no sea tan larga ni complicada.... Suerte amigos mios y espero serles de ayuda mi correo es jdmed2003@yahoo.com, espero que podamos compartir otros temas y si encuentran o saben la solucion al pequeñin problema me avisen... Bye
1.- Debes tener ya diseñado el boton que deseas mostrar en el menu principal, te aconsejo para darle un mejor efecto que hagas dos copias de ese boton, cada uno con colores diferentes.
2.- Creas una capa o un layer con la opcion de DIBUJAR CAPA en la vista estandar.
3.- Luego seleccionas la capa que acabas de crear y te vas al menu principal y seleccionas INSERTAR / Imagen... Que es lo mismo que presionar Ctrl+Alt+I.
4.- Seleccionas el archivo del boton que creaste teniendo en vuenta que si esta grabado con la extension .GIF mucho mejor.
5.- Una vez que hayas insertado la imagen del boton dentro de la capa, presionas Shift+F3
6.- Si te abras dado cuenta abrira a mano derecha la opcion de Etiqueta <Div> que contiene las pestañas de ATRIBUTOS - COMPORTAMIENTOS - CSS RELEVANT
7.- Ya cuando tengas seleccionada la capa en donde insertaste la imagen del boton te vas a la pestaña de COMPORTAMIENTOS y le das click al signo de +
8.- Seleccionas la opcion INTERCAMBIAR IMAGEN
9.- Te abrira una ventana en donde vas a seleccionar el otro boton con el otro color y presionas aceptar
10.- Le vuelves a dar click al sigono de + y seleccionas la opcion MOSTRAR MENU EMERGENTE
11.- Se te abrira una ventana con cuatro pestañas, en la primera de CONTENIDO podras insertar los elementos que quieres que muestre el menu pulsando el signo + y colocandole un nombre (texto), el vinculo que tendra ese sub menu y un destino a la hora de abrirlo.
12.- Puedes colocar alli tantos elementos como quieras que aparezcan, luego pasas a la pestaña de aspecto en donde podras definir si tu menu es vertical u horizontal y darle color a las celdas... Abra una ventana de ejemplo abajo donde podras ir viendo los cambios.
13.- En la pestaña de avanzado puedes configurara el tiempo que deseas que tarde en desplegarse tu menu y el margen del texto.
14.- Por ultimo en la pestaña de posicion defines la posicion relativa al menu inicial que quieres que se te despliegue, si es inferior superior o izquierdo o izquierdo inferior y dejas seleccionada la opcion de OCULTAR MENU CON EVENTO DE ONMOUSEOUT
15.- Si lo notaste hay dos cuadros de posiciones X & Y en donde podras manualmente despues configurar la posicion de tus ventanas, lo que queda es darle click a ACEPTAR y ya tienes tu menu desplegable
16.- Lo mismo lo puedes repetir con los distintos elementos que quieras que tengan un sub menu y estos a su vez pueden tener otrs submenus
Si sigues todos estos 15 pasos al pie de la letra tendras tu menu desplegable con un efecto de intercambio de imagen y color en los botones lo que lo haria mas vistoso... El inconveniente que les dije al principio es que cuando tengan un contenido y corran la pagina este se superpondra encima de los menus que se despliegan pero estoy seguro que entre todos podremos encontrar una solucion que no sea tan larga ni complicada.... Suerte amigos mios y espero serles de ayuda mi correo es jdmed2003@yahoo.com, espero que podamos compartir otros temas y si encuentran o saben la solucion al pequeñin problema me avisen... Bye
Comentario de Xusta
15/1/07
E encontrao un programita muy útil, para no pegarse la matada en dreamweaver.
Se llama Sothink DHTMLmenu, está en ingles xr es muy facil d usar, t ace los menus automaticamente, y si los aces t no tardas nada, puedes personalizarlos y t kedan wapisimos.
Creo k m e bajao la version 7.1 en ingles, buscadla aver si sta en www.sothink.com o algo asi
Se llama Sothink DHTMLmenu, está en ingles xr es muy facil d usar, t ace los menus automaticamente, y si los aces t no tardas nada, puedes personalizarlos y t kedan wapisimos.
Creo k m e bajao la version 7.1 en ingles, buscadla aver si sta en www.sothink.com o algo asi
Comentario de Horacio Garcia Urzua
24/4/07
Que tal.
Yo segui los 15 pasos como indicaban, y logre hacer el menu desplegable sin ningún problema.
Respecto al detalle que se sobrepone el texto de la página al menú, logre solucionarlo.
Lo que hice fue guardar el menu como template (plantilla), y despues cada pagina la hice con base en ese template, asi de esa forma cuando elijo alguna opcion del menu este aparece por encima de la página.
Espero me haya explicado y hayan resuelto asi ese detalle. hasta pronto.
Yo segui los 15 pasos como indicaban, y logre hacer el menu desplegable sin ningún problema.
Respecto al detalle que se sobrepone el texto de la página al menú, logre solucionarlo.
Lo que hice fue guardar el menu como template (plantilla), y despues cada pagina la hice con base en ese template, asi de esa forma cuando elijo alguna opcion del menu este aparece por encima de la página.
Espero me haya explicado y hayan resuelto asi ese detalle. hasta pronto.
Comentario de KRISTAL
19/6/08
HOLA A TODOS
pues que raro que se compliquen tanto la vida por unos simples MENUS EMERGENTES
esto es muy sencillo ya que lo unico que tienen que hacer es elegir la imagen que sera su menu desplegable, abrir comportamientos y elegir menu emergente, mostrar menu emergente... Ahi podran dar todo los submenus que deseen, apareceran y eapareceran cuando situen el mouse, no es complicado y queda muy bien... asi de simple muchachos...
ojala les sirva, recuerden que su menu principal, del cual apareceran los siguientes submenus debe de ser una imagen... hagan elo boton en fireworks y de ahi exportenlo como imagen a dreamweaver y ya esta.
SUERTE
pues que raro que se compliquen tanto la vida por unos simples MENUS EMERGENTES
esto es muy sencillo ya que lo unico que tienen que hacer es elegir la imagen que sera su menu desplegable, abrir comportamientos y elegir menu emergente, mostrar menu emergente... Ahi podran dar todo los submenus que deseen, apareceran y eapareceran cuando situen el mouse, no es complicado y queda muy bien... asi de simple muchachos...
ojala les sirva, recuerden que su menu principal, del cual apareceran los siguientes submenus debe de ser una imagen... hagan elo boton en fireworks y de ahi exportenlo como imagen a dreamweaver y ya esta.
SUERTE
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
