Hola a todos, estoy intentando hacer un menu desplegable con JavaScript y CSS. Encontre uno en una web que estaba bastante bien pero que utilizaba una libreria externa que no quiero utilizar. El problema que le encuentro es con el posicionamiento de las capas, asi que mi idea es la de poner el menu desplegable en cualquier lugar de la pagina para despues al cargarla o al redimensionarla, asignar el valor de las propiedades de estilo top, y left a ese menu desplegable, para que asi estuviera siempre debajo.
No se si me habre explicado muy bien, pero dejo aqui el codigo para que se vea un poco mejor:
Código PHP:
<html>
<head>
<title>Menu de navegacion desplegable</title>
<style type="text/css">
.tabla{background:#FF9900; color:black; font-weight:bold; font-family:verdana,arial; font-size:9; cursor:default;}
.sub{background:#FF9900; color:black; font-weight:bold; font-family:verdana,arial; font-size:9; cursor:default; visibility:hidden; position:absolute; top:20; left:20;}
</style>
<script type="text/javascript">
//funcion que cambia el color de la celda
function cambiar(celda){
if(celda.style.background=="#FFCC00")
celda.style.background="#FF9900" //color encima
else
celda.style.background="#FFCC00" //color inicial
}
//funcion que oculta/muestra el menu
function mostrar(menu){
if(document.all[menu].style.visibility=="visible")
document.all[menu].style.visibility="hidden"
else
document.all[menu].style.visibility="visible"
}
//funcion para posicionar
function posicionar(){
sm1.style.top=m1.style.top;
sm1.style.left=m1.style.left;
}
</script>
</head>
<body onLoad="posicionar()">
<!-- Menu principal -->
<table class="tabla" border=1 bordercolor="black" cellpadding=3 cellspacing=0 align="center">
<tr>
<td onMouseOver="cambiar(this),mostrar('sm1')" onMouseOut="cambiar(this),mostrar('sm1')" id="m1">Enlace 1</td>
<td>Enlace 2</td>
<td>Enlace 3</td>
<td>Enlace 4</td>
</tr>
</table>
<!-- Primer submenu del menu desplegable -->
<table id="sm1" class="sub">
<tr><td border=1 bordercolor="black" cellpadding=3 cellspacing=0 align="center">Enlace 1.1</td></tr>
<tr><td>Enlace 1.2</td></tr>
<tr><td>Enlace 1.3</td></tr>
<tr><td>Enlace 1.4</td></tr>
</table>
<br><br>
</body>
</html>
Otro de los problemas que encuentro es que la funcion que cambia el color de las celdas no funciona correctamente, y no entiendo porque, ya que en otro ordenador, a mi parecer, hice lo mismo y funcionaba
Otra cosa es que cuando pongo un alert(sm1.style.top) por ejemplo, ese resultado no me lo muestra.. he pensado que es por eso el que no funcione la funcion. Si sin embargo en lugar de asignarle el valor de otra celda le colocamos cualquier valor, si que lo coge...
En fin, que llevo ya tiempo intentando hacer este menu de mil formas, pero de ninguna me acaba de quedar bien. Si conoceis cualquier otra forma acepto sugerencias
Gracias de antemano!
