Problema con un menu desplegable

niowest · #1 (**permalink**) 14/01/2005, 07:21

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!

caricatos · #2 (**permalink**) 14/01/2005, 08:46

Hola niowest, bienvenido a los foros

:

Ese código está pensado para explorer... para que sirva en otros navegadores deberías cambiar las ocurrencias document.all[menu] por document.getElementById(menu)... y donde pone sm1.style... poner document.getElementById("sm1")

Prueba con esos cambios, aunque es posible que tenga más "cosillas"

Saludos

niowest · #3 (**permalink**) 15/01/2005, 05:20

La verdad es que no habia pensado en lo del navegador, pero eso es casi un problema secundario, lo que de verdad necesito saber es como cambiar la posicion del desplegable con javascript con alguna funcion parecida a la que intento

angsanchez · #4 (**permalink**) 15/01/2005, 08:03

Hola, niowest
He probado tu código con los cambios de caricatos y funciona sin errores en Firefox 1.0
Lo que falla es el posicionamiento y el cambio de color de la celda (queda en color claro permanentemente). Creo que se debe a que no es posible leer las propiedades de estilo cuando éstas se han definido en una instrucción <STYLE>.
No encuentro modo de arreglarlo.
Por otro lado, si con el onMouseOut desaparece el submenú ¿cómo piensas que se pueda seleccionar éste?

Danger_ · #5 (**permalink**) 15/01/2005, 17:40

para posicionar tu cuadro que aparece lo que tienes que hacer es darle un atributo a tu div--> style="position:absolute;top:20;left:10;", segun donde lo quieras poner.

Saludos !

Danger_ · #6 (**permalink**) 15/01/2005, 17:49

me salio por lo pronto esto:

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 --> 
    <div style="position:absolute;top:15;left:340;" onMouseOver="cambiar(this),mostrar('sm1')" onMouseOut="cambiar(this),mostrar('sm1')"> 
    <table id="sm1" class="sub" width="59"> 
        <tr> 
          <td border=1 bordercolor="black" cellpadding=3 cellspacing=0 align="center" width="53">Enlace 1.1</td></tr> 
        <tr><td width="53">Enlace 1.2</td></tr> 
        <tr><td width="53">Enlace 1.3</td></tr> 
        <tr><td width="53">Enlace 1.4</td></tr> 
    </table> 
    </div> 
    <br><br> 
</body> 
</html>

jejejeje, mejor lo pruebas en frontpage, porque no lo exporte a html, lo digpo por la posicion, pero si funciona, de ahi te puedes basar, suerte.

Saludos !

niowest · #7 (**permalink**) 16/01/2005, 11:41

Hola de nuevo, he probado todo lo que me habeis dicho, y de momento no me ha solucionado demasiado... el codigo que me disteis para que el codigo fuera generico a todos los navegadores no me ha funcionado, he debido hacer algo mal. El resto, de momento he cambiado el codigo para solucionar el problema del cambio de color, pero eso era lo que menos me importaba, porque aunque no se porque no funcionaba con ese codigo, lo he hecho de otra manera aunque quede menos limpio.

La solucion que me diste para posicionar el menu, _danger, no me soluciona realmente nada, porque el probema que tengo es q al ser un posicionamiento absoluto, al redimensionar la pagina el submenu se movera y no se quedara debajo de su boton, asi que eso no me vale.

Por ultimo el problema de que al pasar al submenu este se oculte lo tenia ya previsto y solucionado, no lo inclui para no liar el codigo, ya que no es ese el problema que encuentro. Solo pongo un evento sobre la tabla del submenu y ya esta.

Se os ocurre algo mas¿?

Danger_ · #8 (**permalink**) 16/01/2005, 12:55

pero el posicionamiento es lo de menos NIOWEST, porque no te haces una tabla y la pones donde mas se te acomode, y ahi metes el div, en relative.
(yo lo puse en absolute, solo como ejemplo, el posicionamiento de tus objetos es lo de menos)

Saludos !

niowest · #9 (**permalink**) 16/01/2005, 15:34

Bufff... esq es eso precisamente lo que no entiendo, lo del posicionamiento.

Seria crear una tabla solo con HTML, y una vez hecho eso, coger y ocultarla, y hacer que se muestre la celda al pasar por encima del boton o algo asi? o crear la tabla y dentro de ella hacer un div... esq menudo lio llevo

He pensado tb lo de los diferentes navegadores, con el codigo que me han dicho antes me dices que funciona?? porque a mi al probarlo me ha dado error. Exactamente he cambiado el document.all[menu].style.background="color" por document.getElementById(menu).style.background="co lor"
me he equivocado en algo?

Danger_ · #10 (**permalink**) 16/01/2005, 15:39

ok, no te preocupes amigo, ahora mismo te ago un ejemplo claro en posicion relative, para que lo analices, ami me funciona con firefox, y con IE mejor aun, asi que eso de getElementById(menu), seria para otros navegadores, pero la compatibilidad es lo d emenos, dejemoslo hasta el ultimo.

dame 1 minuto....

Saludos !

niowest · #11 (**permalink**) 16/01/2005, 15:42

No sabes como te agradezco que te molestes en ayudarme, te lo agradecere mucho, por que la verdad es que hay muchos manuales y ejemplos por la red, pero algo sencillo para entender las bases, yo al menos no lo he encontrado.

Muchas gracias (y soy amiga no amigo

)

Danger_ · #12 (**permalink**) 16/01/2005, 15:58

haber, checalo:

Código PHP:

  <html> 
 
<head> 
<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> 
<meta name="ProgId" content="FrontPage.Editor.Document"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>mmmmm....</title> 
    <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:relative; top:0; left:0;} 
    </style> 
 
    <script type="text/javascript"> 
 
        //funcion que cambia el color de la celda 
        function cambiar(celda){     
            if(celda.style.background=="#FFCC00") 
                celda.style.background="#FFCC00"    //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()"> 
 
<div align="center"> 
  <center> 
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="100%" id="AutoNumber1" height="100%"> 
    <tr> 
      <td width="100%"> 
      <div align="center"> 
        <center> 
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="700" id="AutoNumber2" height="500"> 
          <tr> 
            <td width="200" valign="top" bgcolor="#CCCCCC"> 
             
             
             
             
    <!-- 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 --> 
    <div style="top:5;left:0;" onMouseOver="cambiar(this),mostrar('sm1')" onMouseOut="cambiar(this),mostrar('sm1')"> 
    <table id="sm1" class="sub"> 
        <tr><td>000000000000</td></tr> 
        <tr><td>111111111111</td></tr> 
        <tr><td>222222222222</td></tr> 
        <tr><td>333333333333</td></tr> 
    </table> 
    </div> 
    <br><br> 
 
             
             
             
             
             
            </td> 
             
             
            <td width="500" bgcolor="#E9E9E9">&nbsp;</td> 
          </tr> 
        </table> 
        </center> 
      </div> 
      </td> 
    </tr> 
  </table> 
  </center> 
</div> 
 
</body> 
 
</html>

espero y si te sirva.

Saludos !

Danger_ · #13 (**permalink**) 16/01/2005, 15:59

jejejeje, ps si eres amiga, como soy un caballero, con mas razon te ayudo :D jijiji, que paso?, sirve?

Saludos !

niowest · #14 (**permalink**) 16/01/2005, 16:40

Pues bueno, ya he probado esto y mas o menos se como va, pero aun hay cosas que no entiendo demasiado bien. Coloco primero una tabla, dentro de esa tabla coloco otra tabla con el menu principal, y al cerrar esa tabla una etiqueta div con el menu desplegable... asi que sigo sin entender muy bien como se alinea, supongo que es porque esta todo dentro de una misma tabla, pero si por ejemplo quiero que el desplegable aparezca al situarme sobre el segundo o el tercer enlace, o bajo cada uno, no se como puedo hacerlo... vamos que este codigo no se relaciona directamente con la celda en la que esta el boton del menu principal, no??

Danger_ · #15 (**permalink**) 16/01/2005, 16:48

no te agas bolas amiga, mira yo solo te puse un ejemplo de como posicionar dentro de una tabla, es decir, tienes tu diseño de tu web o lo que sea, y dices, a pues quiero ponerla en esta celda, o en esta otra que esta mas arriba o la que sea, ais solo tomas el code, y lo pones dentro de la tabla o celda, la posicion del div que esta en relative, tomara la posicion a partir de la tabla o celda en la que este.

en cambio, si estuviera en absolute, se posiciona apartir del marco de la ventana del navegador, por lo que no es bueno, ya que por cada resolucion aparecera en diferente lugar y hay riesgos que no se adapte al diseño que ya tengas.

ahora, eso que comentas que si dan en la segunda opsion o si quieres que aparesca mas ala derecha, ya eso tu lo asignas, para poder posicionar correctamente todos tus elementos, antes tenias que tener el lugar definido, ya te explique como lo puedes definir con relative, dentro de cualquier tabla o celda, ahora solo crea mas capas, y por cada opsion que aparesca cada una de ellas, logicamente tu decidiras dond eposicionarlas.

si no me entiende, o no puedes, postea, y te ayudo, anda, no te quedes con la duda, eso no es nada bueno ! ;)

Saludos !

niowest · #16 (**permalink**) 16/01/2005, 17:00

Buffff, va a ser que voy a tener que comenzar por lo de las capas, la etiqueta <div> es lo que determina la localizacion de la capa? en que lugar se indica que la posicion de esta capa (quiero decir si va a ser absolut o relative)??

Se supone que deberia crear una capa diferente (un <div>) por cada uno de los submenus, ¿no? y todas esas capas dentro de una tabla? o no hace falta meterlas en ninguna tabla?
No entiendo como la capa puede coger las coordenadas relativas del menu si no esta dentro de ninguna celda de este ni nada parecido... ni se como crear una capa encima de otra en el mismo lugar y hacer que esas capas aparezcan solo al pasar por encima del boton, deberia cambiar los eventos y ponerlos en la etq div en lugar de en en table?

Bueno, de todas formas yo ya lo voy a dejar para mañana, que alli debe ser pronto pero aqui ya pasa la media noche y hay sueño

Gracias de nuevo

Danger_ · #17 (**permalink**) 16/01/2005, 17:06

Bien, me habisas como te fue, wenas noches, Mexico 5:09 pm (la tarde es JOVEN !) jejejeje.

Saludos !

niowest · #18 (**permalink**) 17/01/2005, 08:21

Bueno pues de momento sigo casi como empece... como hago para que la capa que contiene al menu se oculte completamente? y como hago para superponer capas y para ponerla cada una en su lugar?

Danger_ · #19 (**permalink**) 17/01/2005, 08:42

<b>para ocultar las capas??</b>
---> eso ya lo tienes, solo tienes que jugar con las funciones, para poder ocultar las diferentes capas que crees.

<b>como haces para superponer capas??</b>
---> z-index, es un atributo de css, por asi decirlo, este nos permite, mmmm, dar privilegios o mas bien dicho decir quien va primero y quien va despues, por ejemplo:
si tenemos 2 capas;

Código PHP:

  <div style="position:relative;top:10;left:10;z-index:1"></div><div style="position:relative;top:10;left:10;z-index:2"></div>

el que tendra el privilio de sobreponerse sera el iz-index 2, y asi sucecivamente.

y para poner cada capa en su lugar??
---> amiga mia, lo hemos visto todo el tiempo, con top, y left, tu posicionaras cada capa, segun tu decidas donde aparecera, pero, hay dos formas como ya te lo habia comentado, ABSOLUTE, RELATIVE.

ABSOLUTE: el objeto se posicionara apartir de la parte superior izquierda del marco del navegador, independientemente si hay mas objetos, o si el codigo de tu capa este dentro de una celda, lo que sea, esta tomora como base el marco, para posicionarse.

RELATIVE: relative toma en cuenta apartir de donde la pongas, si lo pones dentro de una tabla, o una celda especifica, esta tomara como base esta (segun el top y left que tu le allas dado), digamos que es como una imagen, si tu la pones dentro de una celda, se quedara ahi, pero con este atrivuto puedes posicionar dentro de donde este.

ahora ya sabes las diferencias entre ambos atributos, el posicionamiento ya lo sabes, por desde un principio que mostraste tu code, ya lo tenias en posicion :s, y respcto a como sobreponer, ya te lo explique.

siguele y nos dices si quedo o no.

Saludos !

niowest · #20 (**permalink**) 20/01/2005, 13:12

Hola, aqui estoy otra vez despues de unos dias para decir que sigo sin conseguirlo...

Ya mas o menos he aprendido la diferencia entre una capa situada de forma absola o relativa y que es una capa, pero cuando meto la capa dentro de la celda de la tabla en la quiero que aparezca la celda se amplia para que quepa toda esa capa, con lo que no me soluciona nada porque no es de esa manera de la que lo quiero.

Si me estoy equivocando en algo mas, agradecere que me lo digais

Danger_ · #21 (**permalink**) 20/01/2005, 22:18

mmmm, pues quiero imaginar que si la tabla se expande por la capa, es solo por dos sencillas razones:

1.- esta en relative ( que es como tu querias uzarla )
2.- el tamaño de tu capa width (ancho) y tu height (alto) son mayores que el tamaño de tu celda o tabla.

tendrias que ajustarlo tu para que no te pase eso amiga.

pero aun sigues atorada?, en realidad que es lo que te falta, ya te habia solucionado eso de que cuando se quite el mouse del boton desaparesca la capa, y tambien respecto a como situar tu capa y cosas asi, en si que es lo que falta?