HTML - Menú Dinámico

 
Vista:

Menú Dinámico

Publicado por Esmeralda (1 intervención) el 26/01/2006 19:17:31
Hola!

Tengo un problema con un menú dinámico que estoy haciendo usando un
menu.js, no se si alguien de este foro me pudiera ayudar:

El problema es que en mi html tengo por ejemplo el menú Archivo, con 3
hijos que son: Open, save y Send, y este ultimo tiene todavía 3 hijos que
son Page by E-Mail, Link by E-Mail, Shortcut to Desktop. De la siguiente
manera:

Archivo
Open
Save
Send
...Page by E-Mail
...Link by E-Mail
...Shortcut to Desktop

Y por un menú dinámico se despliegan solamente los hijos de Send

Hasta aqui todo me funciona muy bien

Solo que si quiero añadir mas elementos con sus hijos y mas hijos no me
los despliega, solamente el primero que tenga hijos si los despliega, los
demas no.

este es mi código en Java:

function menu()
{

// Variables, modificar en caso de querer utilizar otros nombres de clases

var parentClass='isParent'; //gets applied when the LI has a nested UL
var activeParentClass='isActive'; //gets applied when the nested UL is
visible
var preventHoverClass='nohover'; //denotes a navigation that should not
get any hover effects
var indicateJSClass='dhtml'; //gets applied to the main navigation when
Javascript is available
var toHideClass='cerrado'; //gets applied to hide the nested UL
var toShowClass='abierto'; //gets applied to show the nested UL
var currentClass='current'; //denotes the current active sub element
and prevents collapsing
var d=document.getElementById('menu'); //denotes the navigation element

// comprueba que el navegador tiene soporte DOM
if(!document.getElementById && !document.createTextNode){return;}

// si existe un elemento con id menu le aplica una clase que lo convierte
en menu dinamico
if(d)
{
if(d.className==''){
d.className = indicateJSClass;
}else {
d.className += ' '+indicateJSClass;
}

var lis,i,firstUL,j,apply;

// recorre todos los LI y mira a ver cuales tienen un UL anidado
lis=d.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
firstUL=lis[i].getElementsByTagName('ul')[0];
// si existe un UL anidado, desactiva el primer enlace anidado y aplica la
clase para mostrar que hay una lista anidada
if(firstUL)
{
lis[i].childNodes[0].onclick=function(){return false;}
lis[i].className+=lis[i].className==''?parentClass:' '+parentClass;
// comprueba si hay algún elemento de la clase "current"
apply=true;
if(new
RegExp('\\b'+currentClass+'\\b').test(lis[i].className)){apply=false;}
if(apply)
{
for(j=0;j<firstUL.getElementsByTagName('li').length;j++)
{
if(new
RegExp('\\b'+currentClass+'\\b').test(firstUL.getElementsByTagName('li')[j].className)){apply=false;break}
}
}
// si no hay ningun elemento de la calse "current", aplica la clase para
esconder la lista anidada
if(apply)
{
//firstUL.className+=firstUL.className==''?toHideClass:'
'+toHideClass;

if(firstUL.className=='')
{
firstUL.className = toHideClass;
}else {
firstUL.className += ' '+toHideClass;
}

// comprueba si existe una clase para prevenir que se abra el menu al
hacer mouseovery aplica solo la funcion
// al evento onclick si ese es el caso, en caso contrario la aplica al
evento onclick y al onmouseover
if(new RegExp('\\b'+preventHoverClass+'\\b').test(d.className))
{
lis[i].onclick=function(){abreocierra(this);}
} else {
lis[i].onclick=function(){abreocierra(this);}
lis[i].onmouseover=function(){abreocierra(this);}
lis[i].onmouseout=function(){abreocierra(null);}
}
// si hay un elemento de clase current, define la lista par aque
permanezca abierta y aplica las
// clases para mostrar la lista anidada y define el LI padre como activo.
} else {
lis[i].keepopen=1;
//firstUL.className+=firstUL.className==''?toShowClass:'
'+toShowClass;

if(firstUL.className=='')
{
firstUL.className = toShowClass;
}else {
firstUL.className += ' '+toShowClass;
}

lis[i].className=lis[i].className.replace(parentClass,activeParentClass);
}
}
}
}

// funcion que muestra y esconde las listas anidadas y añade las clases a
los LI padres.
function abreocierra(o)
{
var childUL,isobj,swap;

// recorre todos los LI de la navegacion
lis=d.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
isobj=lis[i]==o;
// funcion para intercambiar las clases en un objeto
swap=function(tmpobj,tmporg,tmprep)
{
tmpobj.className=tmpobj.className.replace(tmporg,tmprep)
}
// si el LI no tiene un indicador para permanecer visible
if(!lis[i].keepopen)
{
childUL=lis[i].getElementsByTagName('ul')[0];
// comprueba si existe un UL anidado y si el LI actual no es le que ha
sido clickado
// e intercambia las clases de acuerdo con esto (por ejemplo: esconde
todos los otros LI's anidados y
// hace a los Li's padres activos).
if(childUL)
{
if(new RegExp('\\b'+preventHoverClass+'\\b').test(d.className))
{
if(new RegExp('\\b'+activeParentClass+'\\b').test(lis[i].className))
{
swap(childUL,isobj?toShowClass:toHideClass,isobj?toHideClass:toShowClass);
swap(lis[i],isobj?activeParentClass:parentClass,isobj?parentClass:activeParentClass);
} else {

swap(childUL,isobj?toHideClass:toShowClass,isobj?toShowClass:toHideClass);
swap(lis[i],isobj?parentClass:activeParentClass,isobj?activeParentClass:parentClass);
}
} else {
swap(childUL,isobj?toHideClass:toShowClass,isobj?toShowClass:toHideClass);
swap(lis[i],isobj?parentClass:activeParentClass,isobj?activeParentClass:parentClass);
}
}
}
}
}
}
window.onload=function()
{
menu();
// añadir aqui cualquier otra funcion que se quiera lanzar en el evento
onLoad
}

Espero que alguien me pueda ayudar =(
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder