x

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación.
Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies

 
  Entrar Regístrate
 
Menu desplegable onmouser con dreamweaver
#1 · 15/Dic/2004, 04:39
Hola

Lo keria hacer yo era un menu del cual al poner el cursor encima de una palabra o imagen(sin tener que pulsar) te apareciese mas opciones( submenus)

Lo que kiero hacer se ve claramente en www.peugeot.es
Tengo el dreamweaver mx 2004



Farve
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 9
Desde: 28/Oct/2004
· ·
#2 · 17/Dic/2004, 01:31
Lo que quieres hacer es algo muy parecido a esto

http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

Me temo que ni en Dreamweaver ni en otros editores web, existe una forma de hacerlo de forma automatizada. Si no sabes JavaScript puedes intentar bajarte algunos de los ejemplos del site que te he pasado e intentar adaptarlos a tu página.
Otra opción es intentar hacer algo parecido en flash.

Hectorc
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 73
Desde: 16/Dic/2004
·
#3 · 18/Dic/2004, 02:11
hola y gracias
si me harias el favor de decirme paso a paso lo k tengo k hascer te lo agrareceria mucho, o sino como creo el menu en flash y aque no se, tengo el macromedia flash mx 2004 pero no se utilizarlo. gracias otra vez

Farve
Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 9
Desde: 28/Oct/2004
· ·
#4 · 19/Dic/2004, 02:11
Bueno, si no has utilizado nunca Flash, creo que lo mejor será intentar aprovechar el menú hecho con JavaScript. Doy por sentado que el menu del link que te pase te interesa. En caso contrario, hay otros menús en ese sitio. En cualquier caso, paso a explicarte ese menú.
En tu documento html debes poner el siguiente código:

Codigo:

<html>

<head>
<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>

<script language="JavaScript">


var keepstatic=1
var menucolor="#000000"
var submenuwidth=150

</script>

<title>MiPagina</title>
</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="menucontext.js"></script>
<script language="JavaScript">
showToolbar();
</script>
<script language="JavaScript">
function UpdateIt(){
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt();
</script>


<p><br>
<br>
</p>

<h1>Menú situado en la pargte superior<br>
</h1>

</body>




A continuación, en el link que te pasé, hay dos enlaces que corresponden a dos ficheros que te tienes que descargar para que funcione el script. "menu.js" y "menucontext.js". Desde el navegador, haz clic con el botón derecho del ratón sobre cada uno de los enlaces. En el menu que aparece selecciona "Guardar destino como..." (esto si lo haces desde Explorer, si empleas otro navegador, debe haber algún comando similar). En el cuadro que aparece, escoge la ubicación de tu disco duro donde se debe guardar el fichero. Es muy importante que mantengas el mismo nombre y que el fichero tenga extensión js. Si no aparece la extensión js en el cuadro debes ponerlo tu. Por ejemplo si aparece la palabra menu únicamente, entonces tu añade un punto y js, de tal manera que quede menu.js (perdona si comento cosas un poco obvias, pero no conozco tu nivel de conocimientos).
Bien, asegurate que el fichero html y los ficheros con extensión js estan en el mismo directorio. Una vez lo tengas, puedas probar el fichero html para comprobar que el menú funciona.
Vamos a la personalización:

En la parte superior de tu documento html, se encuentra el siguiente código:

Codigo:

<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>



Aqui lo que defines es el estilo del texto que va a componer el menu, por ejemplo el tamaño de la letra va a ser de 12px y la fuente Arial, Ademas define el color del texto (blanco) y el color que va a adquirir el texto cuando pases el cursor sobre él (amarillo). Por ejemplo podrias hacer las siguientes modificaciones. Tamaño del texto 10px, fuente verdana, color gris y al pasar el cursor por encima que cambie el texto a rojo. El codigo seria.

Codigo:

<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 10px verdana; color: #555555; cursor: hand; z-index:100}
#MainTable A:hover {color: red;}
</style>



Un poco mas abajo en el documento html aparece lo siguiente:

Codigo:

var menucolor="#000000"



Esto hace referencia al color de fondo del menú. Por ejemplo puedes poner:

Codigo:

var menucolor="yellow"



Vamos al contenido. Tienes que editar el fichero "menucontext.js". Puedes hacerlo directamente con el bloc de notas. Al abrirlo, veras el siguiente código.

Codigo:

//Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location, linktarget);

menu = new Menu();
menu.addItem("webmasterid", "Web Building Sites", "Web Building Sites", null, null);
menu.addItem("newsid", "News Sites", "News Sites", null, null);
menu.addItem("freedownloadid", "Free Downloads", "Free Downloads", null, null);
menu.addItem("searchengineid", "Search Engines", "Search Engines", null, null);
menu.addItem("miscid", "Miscellaneous", "Miscellaneous", null, null);

menu.addSubItem("webmasterid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/", "");
menu.addSubItem("webmasterid", "JavaScript Kit", "JavaScript Kit", "http://www.javascriptkit.com/", "");
menu.addSubItem("webmasterid", "Web Review", "Web Review", "http://www.webreview.com/", "");
menu.addSubItem("webmasterid", "Freewarejava.com", "Freewarejava.com", "http://www.freewarejava.com/", "_blank");
menu.addSubItem("webmasterid", "Web Monkey", "Web Monkey", "http://www.webmonkey.com/", "_blank");

menu.addSubItem("newsid", "CNN", "CNN", "http://www.cnn.com", "");
menu.addSubItem("newsid", "ABC News", "ABC News", "http://www.abcnews.com", "");
menu.addSubItem("newsid", "MSNBC", "MSNBC", "http://www.msnbc.com", "");
menu.addSubItem("newsid", "CBS news", "CBS News", "http://www.cbsnews.com", "");
menu.addSubItem("newsid", "News.com", "News.com", "http://news.com", "");
menu.addSubItem("newsid", "Wired News", "Wired News", "http://www.wired.com", "");
menu.addSubItem("newsid", "TechWeb", "TechWeb", "http://www.techweb.com", "");

menu.addSubItem("freedownloadid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/", "");
menu.addSubItem("freedownloadid", "Download.com", "Download.com", "http://download.com/", "");
menu.addSubItem("freedownloadid", "Tucows", "Tucows", "http://tucows.com/", "");

menu.addSubItem("searchengineid", "Yahoo", "Yahoo", "http://www.yahoo.com/", "");
menu.addSubItem("searchengineid", "Google", "Google", "http://www.google.com/", "");
menu.addSubItem("searchengineid", "Excite", "Excite", "http://www.excite.com", "");
menu.addSubItem("searchengineid", "HotBot", "HotBot", "http://www.hotbot.com", "");

menu.addSubItem("miscid", "Cnet", "Cnet", "http://www.cnet.com/", "");
menu.addSubItem("miscid", "RealAudio", "RealAudio", "http://www.realaudio.com/", "");
menu.addSubItem("miscid", "MP3.com", "MP3.com", "http://www.mp3.com/", "");

menu.showMenu();
}



Como puedes observar, en él aparecen los nombres de los menús y submenus. Solo tienes que substituir los nombres y las direcciones que aparecen por las que te interesan a ti. Por ejemplo:

Codigo:

//Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location, linktarget);

menu = new Menu();
menu.addItem("webmasterid", "Enlace1", "Web Building Sites", null, null);
menu.addItem("newsid", "Enlace2", "News Sites", null, null);
menu.addItem("freedownloadid", "Enlace3", "Free Downloads", null, null);
menu.addItem("searchengineid", "Enlace4", "Search Engines", null, null);
menu.addItem("miscid", "Enlace5", "Miscellaneous", null, null);

menu.addSubItem("webmasterid", "Enlace1.1", "Enlace1.1", "enlace1.htm", "");
menu.addSubItem("webmasterid", "Enlace1.2", "Enlace2.2", "enlace2.htm", "");
menu.addSubItem("webmasterid", "Enlace1.3", "Enlace3.3", "http://www.webreview.com/", "");


menu.addSubItem("newsid", "enlace2.1", "enlace2.1", "http://www.cnn.com", "");
menu.addSubItem("newsid", "enlace2.2", "enlace2.2", "http://www.abcnews.com", "");


menu.addSubItem("freedownloadid", "enlace3.1", "enlace3.1", "http://www.dynamicdrive.com/", "");
menu.addSubItem("freedownloadid", "enlace3.2", "enlace3.2", "http://download.com/", "");
menu.addSubItem("freedownloadid", "enlace3.3", "enlace3.3", "http://tucows.com/", "");
menu.addSubItem("freedownloadid", "enlace3.4", "enlace3.4", "http://tucows.com/", "");
menu.addSubItem("freedownloadid", "enlace3.5", "enlace3.5", "http://tucows.com/", "");

menu.addSubItem("searchengineid", "enlace4.1", "enlace4.1", "http://www.yahoo.com/", "");
menu.addSubItem("searchengineid", "enlace4.2", "enlace4.2", "http://www.google.com/", "");
menu.addSubItem("searchengineid", "enlace4.3", "enlace4.3", "http://www.excite.com", "");
menu.addSubItem("searchengineid", "enlace4.4", "enlace4.4", "http://www.hotbot.com", "");

menu.addSubItem("miscid", "enlace5.1", "enlace5.1", "http://www.cnet.com/", "");
menu.addSubItem("miscid", "enlace5.2", "enlace5.2", "http://www.realaudio.com/", "");
menu.addSubItem("miscid", "enlace5.3", "enlace5.3", "http://www.mp3.com/", "");

menu.showMenu();
}



Es facil de personalizar. Fijate que cada:

Codigo:

menu.addSubItem("webmasterid", "Enlace1.1", "Enlace1.1", "enlace1.htm", "");



se corresponde con una opción de submenú de un menu principal. En este caso, la primera etiqueta "Enlace1.1" es el texto que se verá en el submenu. El segundo "Enlace1.1" hace referencia al texto que aparecerá en un recuadro amarillo cuando el usuario tenga unos segundos puesto el cursor encima del enlace (igual que un enlace normal). Puedes poner un texto distinto al que aparece en el menu. Por ejemplo:

Codigo:

menu.addSubItem("webmasterid", "Enlace1.1", "Esto lleva al enlace 1.1.", "enlace1.htm", "");



y por último aparece la dirección que quieres vincular.

Espero haberte ayudado aunque haya sido de una forma relativamente extensa. Pero como puedes comprobar, es bastante fácil.

Un saludo.

Hectorc
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 73
Desde: 16/Dic/2004
·
#5 · 20/Dic/2004, 10:22
Dreamweaver si que tiene la opción de crear esos menus. Ve a la izquierda de Dreamweaver y mira en Inspector de Etiquetas > Comportamientos. Verás que hay una opcion que pone Menu Emergente, pues ese puede ser activado, pero por medio de un enlace, al poner el cursor encima de un enlace o imagen enlazada se abre un menu que puede ser totalmente personalizable. Mira el ejemplo que hecho:

--> http://usuarios.lycos.es/doswrongerdos/cositas/ejem.menu.htm

Analiza el código, y practica las opciones de Dreamweaver, que son muchas Giño

Nota: cuidad, hay que subir mm_menu.js también para que funcione, lo puedes ver tb aqui:
--> http://usuarios.lycos.es/doswrongerdos/cositas/mm_menu.js

El menú no funciona bien con FireFox, es el unico problema ...

cdoswebmaster
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 211
Desde: 03/Jul/2004
· ·
#6 · 20/Dic/2004, 12:47
Cdoswebmaster tiene razón, si que se puede hacer con Dreamweaver Flash. Nunca habia empleado este comportamiento, aunque supongo que tendras que buscar el panel de comportamientos por la pantalla de Dreamweaver (yo lo tengo a la derecha).
Bueno, solo indicar que primero tienes que hacer un texto con un hipervinculo. A continuación seleccionas el texto que contiene el hipervinculo y después activas la opción "Mostrar menú emergente" del panel de comportamientos. En caso contrario, no tendrias disponible la opción "Mostrar menú emergente". Lo demás es fácil.

Hectorc
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 73
Desde: 16/Dic/2004
·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Ayuda para webmasters · Editores de páginas WEB
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 19:26 UTC+02:00 DST
Temas similares
 I FotoPTemaMensajesÚltima respuesta
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: chiclevic · 19/Sep/2009, 08:13
121/Sep/2009, 20:31
nicano Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: ojosalton · 05/Abr/2008, 23:09
105/Abr/2008, 23:14
chavp Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: iIi.LeVeL.iIi · 16/Sep/2008, 00:36
116/Sep/2008, 15:20
chavp Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: iIi.LeVeL.iIi · 14/Sep/2008, 22:53
0Hoy, 01:00
Invitad@ Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Por: pinguiguinita · 08/Ene/2008, 23:50
109/Ene/2008, 15:45
Ellocodelataquilla Ir al último mensaje del tema