Menu desplegable (y replegabe al hacer clic en otro vinculo)

[locoxchacho]

Buenas... acudo nuevamente a este foro, para ver si me pueden ayudar con este problema que tengo...

estoy hace dos dias con un script que me baje de ajax para hacer un menu desplegable, pero que no es exactamente lo que me pide el cliente, y como no se casi nada de JS, me es muy dificil adaptarlo a mis necesidades.

Enotnce, lo que quiero hacer (va, lo que me piden hacer, jaja) Es el siguiente menu (por las dudas, ya descarte flash, no quiero usarlo salvo que sea la unica solucion, lo cual lo dudo):

Tengo un menu normal, vertical, un listado, digamos. Los links son las secciones de la pagina de esta forma:

HOME
PORTFOLIO
WEBS
LOGOS

Ahora, al hacer clic en portfolio, se carga una pagina, etc, etc. Pero al hacer clic en WEBS, lo que quiero es que se abra un submenu abajo de ese <li>, donde esten todas las webs que se hayan hecho. Ejmplo:

HOME
PORTFOLIO
WEBS
Dimaat
Domenico
Prevee Films
Logos

Hasta ahi, con un JS lo puedo hacer. La cosa es que, salvo el div#content, el resto no se carga nunca. O sea, el menu nunca vuelve a cargarse nuevamente.

El problem entonces esta que al hacer clic en el link LOGOS, quiero que el submenu se repliegue, quedando todo como el primer menu que puse. ESO es lo que no puedo lograr: puedo hacer que se despliegue al hacer clic, pero no que se repliegue al hacer clic en OTRO link, y no sobre si mismo otra vez (que eso si lo logre, con el mismo script antes nombrado)

Alguien me podra dar alguna ayuda o pista sobre por donde debo encarlarlo, o pasarme algun codigo o sitio donde pued hayar informacion??

muchas gracias, espero que me puedan ayudarrr!!

pablo.

[Adler]

Hola

Creo que te estás complicando demasiado

Prueba así

Código css:

.oculto {display:none}
 

Código javascript:

var visto = null;
function mostrar(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
}
 

Código HTML:

<p onclick="mostrar(1)">MENU1</p>
<div id="1" class="oculto">
SubMenu<br />
SubMenu2<br />
SubMenu3
</div>


<p onclick="mostrar(2)">MENU2</p>
<div id="2" class="oculto">
SubMenu<br />
SubMenu2<br />
SubMenu3
</div>


<p onclick="mostrar(3)">MENU3</p>
<div id="3" class="oculto">
SubMenu<br />
SubMenu2<br />
SubMenu3
</div> 

Suerte

[locoxchacho]

la verdad, que me has simplificado la vida con el codigo!! muchas gracias!

ahora.. agregarle una animacion, digamos, que se suba o baja el menu de a poco.. es demasiado lio, o es mas facil de lo que parece? pq si consigo esa animación, me estaría ahorrando un monton de codigo que tengo ahora que hace ese efecto!!

muchas gracias de antemano y espero que me puedan ayudar otra vez!!

gracias,

pablo.

[locoxchacho]

ninguna ayudita? gracias!

[Adler]

Hola

Todo ese código del que hablas es el que tendrás que usar. Supongo que sabes que ya hay menús hecho para lo que tu quieres, este es un ejemplo

http://www.dynamicdrive.com/dynamici...enu-glossy.htm

Suerte