Código PHP:
<script>
function e(q,noBr) {
document.body.appendChild( document.createTextNode(q) );
if(!noBr) document.body.appendChild( document.createElement("BR") );
}
var cuerpo=document.getElementById("cuerpo");
function getSoloDivs(padre) {
var hijos=padre.childNodes;
for(var i=0, dev=[]; i<hijos.length; i++)
if( hijos[i].nodeType==1 && hijos[i].tagName.toUpperCase()=="DIV" )
dev[dev.length]=hijos[i];
return dev;
}
// capturamos todos los menus (hijos DIV de cuerpo) y los eliminamos del body
var CUERPO_DIVS=getSoloDivs(cuerpo);
for(var i=0, DIVS=[]; i<CUERPO_DIVS.length; i++) {
DIVS[ CUERPO_DIVS[i].id ] = CUERPO_DIVS[i]; // almaceno
cuerpo.removeChild( CUERPO_DIVS[i] ); // elimino
// EVENTOS PARA CADA DIV EN EL ARRAY DIVS, siempre que no sean de tipo código (no habrá excepto cancelar burbujeo en el onclick)
if( /codigo/i.test(CUERPO_DIVS[i].id) ) {
DIVS[ CUERPO_DIVS[i].id ].onclick=function(evento) {
//no queremos que se propague a la capa padre el evento
//si no no podríamos seleccionar ni copiar ni nada
if(window.event) window.event.cancelBubble = true;
else evento.stopPropagation();
}
}
else {
var cadaDiv=getSoloDivs( DIVS[CUERPO_DIVS[i].id] );
for(var j=0; j<cadaDiv.length; j++) {
cadaDiv[j].onmouseover=function() {
this.className="hover";
}
cadaDiv[j].onmouseout=function() {
this.className="";
}
cadaDiv[j].onclick=function(evento) {
var estoyExpandido=false;
//quitamos todo lo que hayamos adjuntado en los demas div de la misma categoria
var cadaDiv=getSoloDivs(this.parentNode);
for(var k=0; k<cadaDiv.length; k++) {
var cadaDiv_DIVS=getSoloDivs(cadaDiv[k]);
if( cadaDiv_DIVS.length>0 ) { //hay submenu en algun cadaDiv
if( cadaDiv[k] == this ) //yo tengo submenu, pero me lo oculto también
estoyExpandido=true;
cadaDiv[k].removeChild(cadaDiv_DIVS[0]);
}
}
if(!estoyExpandido) { //adjuntamos aqui lo que ponga en el atributo show
if( this.getAttribute("show") == null )
this.setAttribute("show", "menuAcciones");
this.appendChild( DIVS[ this.getAttribute("show") ] );
}
if(window.event) window.event.cancelBubble = true; //no queremos que se propague a la capa padre el evento
else evento.stopPropagation();
}
}
}
}
//mostramos el menú inicial
cuerpo.appendChild( DIVS["menuInicial"] );
// AL CERRAR!!
// ningun DIV puede contener otro DIV con mas DIVs dentro = ningun DIV puede contener un menu dentro
// tampoco pueden contener ningun codigo
e("FIN DE CARGA SIN ERRORES");
</script>
</body>
</html>
El resultado es bastante vistoso, y puede llegar a ser una buena manera de ir aprendiendo ejemplos básicos en javascript.
Seguiré desarrollando.
Byes.