controlar menu desplegable

eljuank1982 · #1 (**permalink**) 15/03/2011, 08:51

Hola a todos:
Tengo un menú desplegable que lo llamo con un include de php, al desplegar las diferentes partes de la tabla todo funciona perfecto, hago clic en uno de los vínculos y me llama la página que deseo si problemas. El problema está en que tengo organizado mi sitio por partes (sin uso de frames, no quiero usar tampoco iframes para el menú) y entonces cuando se me muestra el contenido en la parte que le toca; el menú es cargado por el include nuevamente por lo que sale sin expandir y no expandido en el último lugar donde se dio clic.

Mi sitio procesa las rutas así:

index.php?subcarp=Calidad&sec=nombre_pagina

Donde subcarp es la subcarpeta donde están alojadas las distintas páginas que tiene que ver con ese tema.

sec está claro que nombre de página.

Dado a mi problema creo que la solución (mediante Js) sería almacenar en una variable la url actual y analizar si la url contiene determinada cadena al final (es lo mismo que dentro de la variable sec pero sería más cómodo el análisis de la cadena al final de la url)
Luego en función de eso mediante un case o un switch (no se en Js cómo sería), mostrar el menú expandido en determinado lugar sino en su defecto mostrarlo sin expandir.

Como ven creo que tengo bastante clara la vía (pueden corregirme) pero teniendo en cuenta le forma en que está organizado mi sitio no veo mucha variante.

Mi pregunta es cómo puedo traducir a código lo que planteo.
Cómo almacenar en una variable el último valor de la url abierta hasta el momento, y luego cómo implementar el case o el switch. Como podrán ver soy muy novato.

Aquí pongo el menú y más abajo pongo la función:

menú:

Código HTML:

<table width="168"  border="0" cellpadding="2" cellspacing="2" id="menucal">
  <tr>
    <td width="0"><a href="#" onClick="muestra('op1','btn1')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn1" id="btn1"></a></td>
    <td width="100%" class="tipmenus">Sistema Gestión de la Calidad</td>
  </tr>
  <tr style="display:none" id="op1">
    <td>&nbsp;</td>
    <td>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Manuales</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Procedimientos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Fichas de Procesos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Encuestas a los clientes</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Evaluación de la Calidad</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=leyen2sgcotros">Otros documentos de SGC</a>
	</td>
  </tr>
  <tr>
    <td><a href="#" onClick="muestra('op2','btn2')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn2" id="btn2"></a></td>
    <td class="tipmenus">Medio Ambiente</td>
  </tr>
  <tr style="display:none" id="op2">
    <td>&nbsp;</td>
    <td><li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Programa de Gestión Ambiental</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Manejo de Desechos Peligrosos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=leyen2mamotros">Otros…</a></li>
	</td>
  </tr>
  <tr>
    <td><a href="#" onClick="muestra('op3','btn3')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn3" id="btn3"></a></td>
    <td class="tipmenus">Ciencia e Innovaci&oacute;n Tecnol&oacute;gica</td>
  </tr>
  <tr style="display:none" id="op3">
    <td>&nbsp;</td>
    <td><li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Banco de Problemas</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Generalización</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Otros…</a></li>
	</td>
  </tr>
</table>

Función:

Código HTML:

<script>
function muestra(myid,myboton) 
{ 
if(document.getElementById(myid).style.display=='') 
{ 
document.getElementById(myid).style.display = "none"; 
document.getElementById(myboton).src = "img/mas.gif"; 
} 
else 
{ 
document.getElementById(myid).style.display = ""; 
document.getElementById(myboton).src = "img/menos.gif"; 
} 
}
</script>

Salu2, al tanto y gracias por adelantado.

eljuank1982 · #2 (**permalink**) 19/03/2011, 09:42

Logré lo que quería de la siguiente manera:
En el body:

Código HTML:

<body onload="getParameter('sec')";>

En el head:

Código HTML:

function muestra(myid,myboton) 
{ 
if(document.getElementById(myid).style.display=='') 
{ 
document.getElementById(myid).style.display = "none"; 
document.getElementById(myboton).src = "img/mas.gif"; 
} 
else 
{ 
document.getElementById(myid).style.display = ""; 
document.getElementById(myboton).src = "img/menos.gif"; 
} 
}

function getParameter(parameter){
// Obtiene la cadena completa de URL
var url = location.href;
/* Obtiene la posicion donde se encuentra el signo ?, 
ahi es donde empiezan los parametros */
var index = url.indexOf("?");
/* Obtiene la posicion donde termina el nombre del parametro
e inicia el signo = */
index = url.indexOf(parameter,index) + parameter.length;
/* Verifica que efectivamente el valor en la posicion actual 
es el signo = */ 
if (url.charAt(index) == "="){
// Obtiene el valor del parametro
var result = url.indexOf("&",index);
if (result == -1){result=url.length;};
// Despliega el valor del parametro
//alert(url.substring(index + 1,result));
var seccion = url.substring(index + 1,result);
//alert(seccion);
switch (seccion)
{
case 'leyen2sgcotros':
  document.getElementById('calsgc').onclick(); 
  break;
case 'leyen2mamotros':
  document.getElementById('calma').onclick();
  break;
default:
//  document.getElementById('hola').click(); 
}
}
}

Y en el menú lateral que llamo por include, puse esto:

Código HTML:

<div id="menulateral">
<br />
<ul id="NavePri">
    <li><a href="index.php?subcarp=Calidad&sec=Calidad">Inicio</a></li>
</ul>
<table width="168"  border="0" cellpadding="2" cellspacing="2" id="menucal">
  <tr>
    <td width="0"><a id="calsgc" href="#" onClick="muestra('op1','btn1')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn1" id="btn1"></a></td>
    <td width="100%" class="tipmenus">Sistema Gestión de la Calidad</td>
  </tr>
  <tr style="display:none" id="op1">
    <td>&nbsp;</td>
    <td>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Manuales</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Procedimientos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Fichas de Procesos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Encuestas a los clientes</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Evaluación de la Calidad</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=leyen2sgcotros">Otros documentos de SGC</a>
	</td>
  </tr>
  <tr>
    <td><a id="calma" href="#" onClick="muestra('op2','btn2')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn2" id="btn2"></a></td>
    <td class="tipmenus">Medio Ambiente</td>
  </tr>
  <tr style="display:none" id="op2">
    <td>&nbsp;</td>
    <td><li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Programa de Gestión Ambiental</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Manejo de Desechos Peligrosos</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=leyen2mamotros">Otros…</a></li>
	</td>
  </tr>
  <tr>
    <td><a href="#" onClick="muestra('op3','btn3')";><img src="img/mas.gif" width="15" height="15" border="0" align="absmiddle" name="btn3" id="btn3"></a></td>
    <td class="tipmenus">Ciencia e Innovaci&oacute;n Tecnol&oacute;gica</td>
  </tr>
  <tr style="display:none" id="op3">
    <td>&nbsp;</td>
    <td><li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Banco de Problemas</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Generalización</a></li>
	<li id="NaveSub"><a href="index.php?subcarp=Calidad&sec=construcion">Otros…</a></li>
	</td>
  </tr>
</table>
<ul id="NavePri">
    <li><a href="Docs/Calidad/BoleMes/marzo _3_.pdf" target="_blank">Boletín del mes</a></li>
</ul>
</div>

El problema está que en lugar de llamar a la función por el evento onload del body, quiero que todo se haga dentro del menú o que por lo menos tratar de hacer que la funcón se cargue como con un evento onload del div menulateral cosa que no he podido logar si alhguien sabe cómo hacer esto por favor.

Salu2 y al tanto.