menu desplegable

Owen-Bonilla · #1 (**permalink**) 03/03/2003, 10:14

como se hace un menú desplegable como el de esta página ( por ejemplo ):

El Exito

Me imagino que este es el foro correcto verdad...

Saludos y gracias

P.D. el menú al que me refiero es de donde dice arriba TIENDA, COMUNIDAD, SEMINARIOS, INICIO, eTC...

Saludos

Owen

KarlanKas · #2 (**permalink**) 03/03/2003, 10:33

Creo que ese menú está hecho con Fireworks...

Yanix · #3 (**permalink**) 03/03/2003, 10:55

Hola Owen,

Como dice Karlankas, fue con fireworks...El js externo es este:
http://www.elexito.com/script/menu.js

Información y datos:
http://www.macromedia.com/support/fi...ed_js_file.htm
http://www.free2smoke.f2s.com/fw_menu.txt

Otros menúes que podrian ayudarte si lo ves demasiado complicado...
http://dynamicdrive.com/dynamicindex1/index.html

Owen-Bonilla · #4 (**permalink**) 04/03/2003, 07:47

Gracias a los dos, habia olvidado que con fireworks se pueden hacer esos efectos, yo lo manejaba, pero muy muy poco, creo que la falta de practica y uso hace que se olviden algunas cosas

Checare los Links que me diste, si me interesa aprender un poco mas...

Gracias...

Owen Bonilla

Owen-Bonilla · #5 (**permalink**) 04/03/2003, 07:57

Hola yo de nuevo...
Tengo una duda, donde haces mención a esto:

Cita:

Como dice Karlankas, fue con fireworks...El js externo es este:
http://www.elexito.com/script/menu.js

me baje el archivo, pero.. mm no se como usarlo

... ayer me baje un ejemplo, y me daban este "trozo" de código html para que se viera:

Código:

<%Language=VBScript%>

<HTML>
<HEAD>
<TITLE>menu Desplegable</TITLE>


	<link rel="stylesheet" href="dropdown.css" type="text/css">
	<script language="JavaScript1.2" src="menu_data.js"></script>
</head>


</HEAD>
<BODY>


<body>
	<script language="JavaScript1.2" src="menu_script.js"></script>

</body>

</BODY>
</HTML>

lo use, solamente cambiando por el nombre del archivo... y no se vio...

Me pueden decir como puedo verlo... como veran soy principiante en JS pero si me interesa aprender..

Saludos y Gracias de nuevo !!!

Owen Bonilla

Yanix · #6 (**permalink**) 04/03/2003, 09:32

No hay problema...te ayudaré en lo que pueda.
El menú externo fue ese que te pegué...Ahora bien también se complementa con otro donde le colocas los nombres, vinculos,etc.
Ese otro está en: http://www.elexito.com/script/default.js

Usan además una página de estilo para cambiar letras, etc. Pero por ahora lo importante es el funcionamiento del menú.

Para llamarlos, debes colocarlos entre <HEAD> y </HEAD> así:

Código:

<head>
<script language="JavaScript1.2" src="menu.js"></script>
<script language="JavaScript1.2" src="default.js"></script>
</head>

En este caso, yo los coloque dentro del mismo directorio donde tengo la página, pero puedes colocarlos en otra carpeta y llamarlos al igual que ellos lo hicieron desde la carpeta script.
Ahora bien..si abres default.js te fijas que hay una función llamada fwLoadMenus.
Esta es la que inicia todo...así que la llamamos en nuestra página.

Pero qué sucede?...La página tiene unos tabuladores que realmente son unas imágenes. Así que te tendrías que bajar esas imágenes o crear tus propios tabuladores (Llamado back_button, además de los bt_corners, que son los que le dan la forma de tabulador...)

Así que llamamos nuestra función inicial y las imágenes o botones tabuladores. Recuerda llamarlos desde la carpeta exacta donde están o si los colocas todos en una misma carpeta, llámalos por el nombre.

Después de llamar nuestros .js...nos faltaría esto:
(Recurso modificado de http://www.elexito.com)

Código:

<body>
<script language="JavaScript1.2">fwLoadMenus();</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#1878DC">
  <tr> 
    <td width="255" align="right" height="61">  
    </td>
    <td width="600" height="61" valign="bottom"> <br>
      <table width="500" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="22"><img src="bt_corner_blank1.gif" width="22" height="22"></td>
          <td bgcolor="#FFFFFF" width="41" align="center"><font size="2"><a href="linkalinicio" class="titulo1">uno</a></font></td>
          <td width="22"><img src="laesquina.gif" width="22" height="22"></td>
          <td width="70" background="untab.gif" align="center"><a href="mipag.html" class="titulo1" >dos</a></td>
          <td width="22"><img src="laesqui2.gif" width="22" height="22"></td>
          <td width="70" background="untab.gif" align="center"><a href="#" onMouseOut="FW_startTimeout();"  onMouseOver="window.FW_showMenu(window.fw_menu_1,360,75);" class="titulo1" >tres</a></td>
          <td width="22"><img src="laequina.gif" width="22" height="22"></td>
          <td width="76" background="untab.gif" align="center"><a href="#" onMouseOut="FW_startTimeout();"  onMouseOver="window.FW_showMenu(window.fw_menu_2,490,75);" class="titulo1" >Cero</a></td>
          <td width="22"><img src="laesqui2.gif" width="22" height="22"></td>
          <td width="130" background="untab.gif" align="center"><a href="#" onMouseOut="FW_startTimeout();"  onMouseOver="window.FW_showMenu(window.fw_menu_4,595,75);" class="titulo1" > 
            cuatro</a></td>
          <td width="22"><img src="otraesqui.gif" width="22" height="22"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

Nota:
El (window.fw_menu_1,360,75) es la posición relativa a la ventana. Me explico..el primer número es la distancia donde se colocará horizontalmente el submenú. El segundo número es la distancia desde el tope de la ventana.
Ejemplo, si le colocas en vez de 75...un 0, ese submenú aparecerá en el tope de la ventana.

Espero esto te ayude, aunque la verdad creo que si estás empezando...este menú en específico podría resultar muy complicado.