Menu desplegable vertical

[yasmine27]

Hola a todos, espero que me ayudeis por favor porque me estoy volviendo loca, tengo el código para poner un menu horizontal, que es el siguiente

Código Javascript:

function entradaMenu(defEntrada){
    var enlace = document.createElement("a");
    var hijoTexto = document.createTextNode(defEntrada[0]);
    enlace.appendChild(hijoTexto);
    if(defEntrada[1] == '1'){
        // Creamos la imagen de la llave
        var llave = document.createElement("img");
        llave.setAttribute("src", "http://www");
        llave.style.width = "16px";
        llave.style.height = "7px";
        llave.style.border="0px none";
        enlace.appendChild(llave);
    }
    
    if ('string' == typeof defEntrada[2]) {
        enlace.setAttribute("href", defEntrada[2]);
        //asignar al enlace la URL defEntrada[2]
        this.enlace = defEntrada[2];
    } else {
        var subMenu = crearMenu(defEntrada[2]);
        enlace.setAttribute("href", "#");
        anadeOnClick(enlace, subMenu);
    }
    return enlace;
}
 
function anadeOnClick(enlace, subMenu) {
        enlace.onclick = function () {
            mostrarMenu(enlace,subMenu);
        }
}
 
function mostrarMenu(enlace,subMenu){
    var miTd = enlace.parentNode;
    var miTr = miTd.parentNode;
    while (miTd.nextSibling) {
        miTr.removeChild(miTd.nextSibling);
    }
    miTr.appendChild(subMenu);
}
 
function crearMenu(defMenu){
    var miMenu = document.createElement("td");
    miMenu.style.valign="top";
    for(var i=0; i<defMenu.length; i++){
        miMenu.appendChild(entradaMenu(defMenu[i]));
        miMenu.appendChild(document.createElement("br"));
    }
    return miMenu;
}
 
function inicializarMenu(defMenu, divMenu/*, prefijoEstilo*/) {
    var tabla = document.createElement("table");
    tabla.setAttribute("cellpaddind", 0);
    tabla.setAttribute("cellspacing", 10);
    var tbody = document.createElement("tbody");
    var tr = document.createElement("tr");
    tr.appendChild(crearMenu(defMenu/*, prefijoEstilo, nivel*/));
    tbody.appendChild(tr);
    tabla.appendChild(tbody);
    document.getElementById(divMenu).appendChild(tabla);
}
 

Tengo definido un defMenu del tipo

Código Javascript:

var dafMenu= [
                   ["nombre" ,llave, [
                                                 ["nombre1a",llave,enlace1a],
                                                 ["nombre1b",llave,enlace2a],
                                                 ["nombre1c",llave,enlace3a]
                                 ]
                    ]
                     ["nombre2" ,llave, [
                                                 ["nombre2a",llave,enlace1a],
                                                 ["nombre2b",llave,enlace2a],
                                                 ["nombre2c",llave,enlace3a]
                                 ]
                    ]
]
 

Lo que he consgeuido que me salga es lo siguientes:
nombre
nombre2

Si cliko en nombre por ejemplo me sale el menu a la derecha al estilo

Código Javascript:

[B]nombre       nombre1a
                       nombre1b
                       nombre1c
nombre2
[/B]
 

Y lo que quiero conseguir es q al clickar por ejemplo en nombre me salga debajo es decir:

nombre
nombre1a
nombre1b
nombre1c
nombre2

Y si se puede que cuando este seleccionado nombre por ejemplo ponerle algun estilo especial como seria?? Alguien me puede ayudar por favor? Gracias!!!

[yasmine27]

Nadie me puede ayudar????

[yasmine27]

Iniciado por yasmine27

Hola a todos, espero que me ayudeis por favor porque me estoy volviendo loca, tengo el código para poner un menu horizontal, que es el siguiente

Código Javascript:

function entradaMenu(defEntrada){
    var enlace = document.createElement("a");
    var hijoTexto = document.createTextNode(defEntrada[0]);
    enlace.appendChild(hijoTexto);
    if(defEntrada[1] == '1'){
        // Creamos la imagen de la llave
        var llave = document.createElement("img");
        llave.setAttribute("src", "http://www");
        llave.style.width = "16px";
        llave.style.height = "7px";
        llave.style.border="0px none";
        enlace.appendChild(llave);
    }
    
    if ('string' == typeof defEntrada[2]) {
        enlace.setAttribute("href", defEntrada[2]);
        //asignar al enlace la URL defEntrada[2]
        this.enlace = defEntrada[2];
    } else {
        var subMenu = crearMenu(defEntrada[2]);
        enlace.setAttribute("href", "#");
        anadeOnClick(enlace, subMenu);
    }
    return enlace;
}
 
function anadeOnClick(enlace, subMenu) {
        enlace.onclick = function () {
            mostrarMenu(enlace,subMenu);
        }
}
 
function mostrarMenu(enlace,subMenu){
    var miTd = enlace.parentNode;
    var miTr = miTd.parentNode;
    while (miTd.nextSibling) {
        miTr.removeChild(miTd.nextSibling);
    }
    miTr.appendChild(subMenu);
}
 
function crearMenu(defMenu){
    var miMenu = document.createElement("td");
    miMenu.style.valign="top";
    for(var i=0; i<defMenu.length; i++){
        miMenu.appendChild(entradaMenu(defMenu[i]));
        miMenu.appendChild(document.createElement("br"));
    }
    return miMenu;
}
 
function inicializarMenu(defMenu, divMenu/*, prefijoEstilo*/) {
    var tabla = document.createElement("table");
    tabla.setAttribute("cellpaddind", 0);
    tabla.setAttribute("cellspacing", 10);
    var tbody = document.createElement("tbody");
    var tr = document.createElement("tr");
    tr.appendChild(crearMenu(defMenu/*, prefijoEstilo, nivel*/));
    tbody.appendChild(tr);
    tabla.appendChild(tbody);
    document.getElementById(divMenu).appendChild(tabla);
}
 

Tengo definido un defMenu del tipo

Código Javascript:

var dafMenu= [
                   ["nombre" ,llave, [
                                                 ["nombre1a",llave,enlace1a],
                                                 ["nombre1b",llave,enlace2a],
                                                 ["nombre1c",llave,enlace3a]
                                 ]
                    ]
                     ["nombre2" ,llave, [
                                                 ["nombre2a",llave,enlace1a],
                                                 ["nombre2b",llave,enlace2a],
                                                 ["nombre2c",llave,enlace3a]
                                 ]
                    ]
]
 

Lo que he consgeuido que me salga es lo siguientes:
nombre
nombre2

Si cliko en nombre por ejemplo me sale el menu a la derecha al estilo

Código Javascript:

[B]nombre       nombre1a
                       nombre1b
                       nombre1c
nombre2
[/B]
 

Y lo que quiero conseguir es q al clickar por ejemplo en nombre me salga debajo es decir:

nombre
nombre1a
nombre1b
nombre1c
nombre2

Y si se puede que cuando este seleccionado nombre por ejemplo ponerle algun estilo especial como seria?? Alguien me puede ayudar por favor? Gracias!!!