Menu queda desplegado

Jamati · #1 (**permalink**) 12/01/2009, 14:19

Hola:

Antes que nada supongo que este post es de Javascript, sino el Moderador por favor que lo mueva donde crea conveniente.

Tengo estas dos paginas:

y la página prueba.htm:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;border:0;outline:0;}
ul#menu li {float:left;margin:0 20px;background:#CCCCCC;color:#000000;}
ul#menu li ul {display:none;}
ul#menu li.over ul {display:block;}
</style>
<script language="JavaScript">
start=function() {
root = document.getElementById("menu");
for (i=0; i<root.childNodes.length; i++)
{
node = root.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace("over", "");}
}}}
window.onload=start;
</script>
</head>
<body>
<ul id="menu">
<li><span>FILA 1</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
<li><span>FILA 2</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
<li><span>FILA 3</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
</ul>
</body>
</html>

y la página prueba1.htm:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;border:0;outline:0;}
ul#menu li {float:left;margin:0 20px;background:#CCCCCC;color:#000000;}
ul#menu li ul {display:none;}
ul#menu li.over ul {display:block;}
</style>
<script language="JavaScript">
start=function() {
root = document.getElementById("menu");
for (i=0; i<root.childNodes.length; i++)
{
node = root.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace("over", "");}
}}}
window.onload=start;
</script>
</head>
<body>
<ul id="menu">
<li><span>FILA 1</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
<li><span>FILA 2</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
<li><span>FILA 3</span>
<ul>
<li><a href="prueba1.htm">SUBFILA 1</a></li>
<li><a href="prueba1.htm">SUBFILA 2</a></li>
<li><a href="prueba1.htm">SUBFILA 3</a></li>
</ul>
</li>
</ul>
<br>
<br>
<br>
HOLAAAAAAAAA<br>
HOLAAAAAAAAA<br>
</body>
</html>

El problema es el siguiente:

Si ejecutan prueba.htm y del menú desplegable de cualquier fila, hacen click en el link que dice "subfila" se irá a la página prueba1.htm. Luego, si pulso el botón ATRAS del explorador vuelve a la página prueba.htm.

Hasta acá perfecto, pero en FF funciona mal, ya que el menu desplegable funciona bien, pero el problema surge cuando hago click en el botón de ATRAS del explorador de FF.... entonces al volver a prueba.htm me aparece ya desplegado el submenu de la fila en la cual había echo click.

Por favor si lo pueden chequear y darme alguna sugerencia de como solucionar esto estaré muy agradecido.

Desde ya muchas gracias a todos.

Saludos

Jamati · #2 (**permalink**) 13/01/2009, 07:26

Nadie lo probó o nadie sabe alguna solución para pasarme ?

Help me por favorr !!

sweetlydark · #3 (**permalink**) 13/01/2009, 07:41

Según tengo entendido ese es el funcionamiento correcto del botón de atrás de FF. Te devuelve al pagina anterior, tal como lo dejaste.

No hay ningún estándar con el funcionamiento de estos botones y por lo tanto cada desarrollador de navegadores puede programarlos como ellos se antoje; por eso es recomendado que tu pagina no dependa de este para su funcionamiento.

Así que si no quieres que pase esto vas a tener que implementar un código para esto aunque no se como se haría.

*También el problema que tienes que cuando seleccionas un enlace del menu nunca recibe el orden de mouseout. Acabo de mirar el código (no explicaste el problema al cien) no estoy segura como se puede resolver sorry.*

sweetlydark · #4 (**permalink**) 13/01/2009, 08:17

Me acabo de dar de cuenta cual es el problema

que tonta me siento porque lo dije en el post de arriba. No se esta registrando el mouseout por lo tanto no esta borrando el clase over.

Lo puse en prueba para ver que estaba haciendo y cuando le das back y colocas el mouse sobre el, vuelve a colocar over y tienes class=" over over" asi que que cuando mouseout lo borra tienes class=" over".

Puedes añadir un if que no coloque over si el class ya es igual a ella.

Jamati · #5 (**permalink**) 13/01/2009, 08:52

Muchas gracias sweetlydark:

Mas que nada, en FF el problema lo tengo porque al volver atrás, me queda la clase over y por ende se queda desplegado el menú, y no quiero que sea así, ya que si paso por las demás filas se van desplegando encima y queda horrible.

Yo podría poner un IF, pero mi intensión es que al apretar el ATRAS del navegador, no quede desplegado el menu, entonces creo que el IF mucho no me serviría, no ?

Nuevamente muchísimas gracias otra vez.

sweetlydark · #6 (**permalink**) 13/01/2009, 09:04

Con el if al meno cerra cuando vuelvas a pasar el mouse sobre ella. No se si puede incluir un acción en el onload para que verifique si algún menu tiene el clase over y si si quitarlo ya que no se si el onload ejecuta con el botón de atrás pero lo puedes intentar.

Jamati · #7 (**permalink**) 13/01/2009, 12:27

el problema es que al apretar el ATRAS del navegador, no se estaría recargando la página, entonces por mas que agregue codigo, al ir a una página y volver hacia ATRAS me queda siempre con clase over ya dispuesta.

sweetlydark · #8 (**permalink**) 13/01/2009, 13:23

Sin usar nombres o id lo mas que puedes hacer creo es usar esto:

Código:

node.onmouseover=function() {if(this.className!="over"){this.className+=" over";}}

lo cual permite que cierre después de pesarle el ratón de nuevo.

Jamati · #9 (**permalink**) 16/01/2009, 11:34

Gracias sweetlydark.

Sigue sin funcionar. No sé como hacer para que en FF al volver atrás no quede desplegado. Alguien sabría decirme??

Desde ya muchas gracias igualmente.

sweetlydark · #10 (**permalink**) 16/01/2009, 13:22

Has intendado un evento onclick??

Jamati · #11 (**permalink**) 16/01/2009, 16:20

Pero donde y como lo escribo el evento onClick ??

sweetlydark · #12 (**permalink**) 18/01/2009, 20:59

estaba pensando que como ff no ejecuta el mouseout cuando se va de la pagina pero si el click (cuando tocas un enlace) que podrias colocar un evento onclick que te ejecute el mismo evento del mouseout.

Jamati · #13 (**permalink**) 25/01/2009, 13:20

En base al ejemplo que puse al principio del post, podrías ponerme un ejemplo para poder entenderte mejor ?

Muchas gracias.

sweetlydark · #14 (**permalink**) 26/01/2009, 06:55

Vamos a usar este fila de prueba:

Código:

<li><span>FILA 3</span>
<ul>
<li><a onclick="this.className=this.className.replace("over", "");" href="prueba1.htm">SUBFILA 1</a></li>
<li><a onclick="this.className=this.className.replace("over", "");"  href="prueba1.htm">SUBFILA 2</a></li>
<li><a onclick="this.className=this.className.replace("over", "");"  href="prueba1.htm">SUBFILA 3</a></li>
</ul>

A ver si eso lo resuelve.

Jamati · #15 (**permalink**) 27/01/2009, 06:57

Ohhhhhh sweetlydark

Muchísimas gracias, la verdad que ahora funciona perfecto. Lo único es que vos me dijiste que el onclick lo escriba sobre la etiqueta <a>, pero finalmente lo hice sobre la etiqueta <li> por lo que tuve que agregar en el javascript:

node.onclick=function() {this.className=this.className.replace("over", "");}

Y funciona bien

. Vos por algún motivo especial lo pusiste sobre el link ? o te confundiste.

Mil gracias por todo.

Saludos

sweetlydark · #16 (**permalink**) 27/01/2009, 07:09

Era solo para verificar si funcionaba, me imaginaba que si, si ibas a hacer lo que hiciste. ;)

Jamati · #17 (**permalink**) 27/01/2009, 13:26

Ok, gracias nuevamente.

Adiosss