problemas con un menú desplegable vertical...

[Nark]

Buenas, en lugar de coger el típico script ya hecho que tiene el código para hacer un menú desplegable vertical, he intentado la osadía de hacerlo yo mismo, como es lógico me han salido problemas...

Lo que he hecho es una tabla con una sola fila donde cada columna es una opción que despliega otro menú. Al poner el ratón encima aparece una capa (un "div" que tiene en su interior una tabla, el div sirve para ocultarla), con el submenu.

El problema es que el submenu aparece a la izquierda y no consigo que aparezca al sitio donde deberia... en resumen mis dos dudas:

- Como modificar la posición horizontal de una capa con javascript?

- Como conocer la posición en que tendría que aparecer el submenu, como se sabe la posición horizontal de un elemento (ya sea una capa o lo que sea)?

Si la solución solo funciona en IE no importa, ya que es para una parte de la web privada.

Gracias por su ayuda.

[claray]

Hace un tiempo hice un menu similar, la diferencia es que operaba en distintos frames...pero da igual...

Para modificar la posicion del layer debes utilizar los estilos:

<div id="eldiv" style="visibility:hidden;position:absolute;top:10;left:50;">
...
</div>

para ubicar el layer bajo la posicion de la celda de la tabla que usas como menu:


<table>
<tr>
<td onclick="showdiv(this);"> menu 1</td>
<td onclick="showdiv(this);"> menu 2</td>
<td onclick="showdiv(this);"> menu 3</td>
</tr></table>

<script language="JavaScript">
function showdiv(eltd){
document.all.eldiv.style.left = eltd.offsetLeft;
document.all.eldiv.style.visibility = "visible";
}
</script>


si mal no recuerdo, eso debería funcionar.

Saludos.

[Nark]

Muchas gracias, funciona!

consegui poner tus dos comandos de la función en la mia, pongo como he adaptado el codigo tanto por si sirve de ayuda a otros como para explicar otro problema que tengo:

1) Tu has puesto:

Código HTML:

<script language="JavaScript">
function showdiv(eltd){
document.all.eldiv.style.left = eltd.offsetLeft;
document.all.eldiv.style.visibility = "visible";
}
</script> 

yo utilizo un 'eldiv' diferente cada vez, tienen nombres distintos, por lo tanto modifico la función y paso el id a modificar; a parte con tu codigo el submenu acababa donde empezaba el menu, por lo tanto quedaba desplazado a la izquierda y sume su tamaño a la posición, pero esto no arregla el problema porque continua quedando descolocado, alguna sugerencia para esto?

Código HTML:

<script language="JavaScript">
function showdiv(id, eltd){
document.getElementById(id).style.left = document.getElementById(eltd).offsetLeft + document.getElementById(eltd).clientWidth;
document.getElementById(id).style.visibility = "visible";
}
</script> 

luego modifico la llamada, sobretodo porque lo estaba haciendo con mouseover y mouseout:

Código HTML:

<td id="t1" onMouseOver="showdiv('div1', 't1');" onMouseOut="hidediv('div1');"> menu 1</td>
<td id="t2" onMouseOver="showdiv('div2', 't2');" onMouseOut="hidediv('div2');"> menu 2</td> 

y el codigo:

Código HTML:

<div id="div1" style="visibility:hidden;position:absolute;top:10;left:50;" onMouseOver="showdiv('div1', 't1');" onMouseOut="hidediv('div1');">
</div>
<div id="div2"  style="visibility:hidden;position:absolute;top:10;left:50;" onMouseOver="showdiv('div2', 't2');" onMouseOut="hidediv('div2');">
</div> 

El problema es que cuando bajo el raton de la opcion del menu para pasar al submenu este desaparece tan rapido que no me deja llegar al submenu.... alguna ayuda para esto?


gracias de nuevo

[claray]

Tal y como recuerdo el tema, ´no deberias esconder el "div" al salir del "td" que lo muestra, me explico?

implementa una funcion que esconda todos los otros divs en el mouseover (excepto el que corresponde mostrar) del "td" y esconde el div en el mouseout de este. Hasta donde me acuerdo ello lleva a que un "div" puede quedar abierto si nunca paso sobre él, pero puedes esconder a los tantos segundos si no se ha producido un mouseover.. me sigues? espero que si.

saludos y suerte

[Nark]

uff, muchas gracias por tu ayuda, dificil hubiese sido que lo sacase yo solo

te sigo, y es muy buena idea, una gran idea... pero ya has visto mi nivel de javascript... me hechas una mano con lo de "esconder a los tantos segundos" como se se tendria que implementar mas o menos el contador para desaparecer a los 3 segundos?

[claray]

OK, echale una mirada a un post anterior:

http://www.forosdelweb.com/f13/control-tiempo-inactividad-226666/

suerte.

[Nark]

muchas gracias, probaremos a ver si consigo que funcione