Più menù verticali nella stessa pag

[dmarrr]

Salve a tutti. Vado al sodo: avrei la necessità di inserire due menu verticali espandibili nella stessa pag. Tutti i menu che ho trovato non permettono questo; infatti funziona solo il primo . Ho cercato ma non trovo niente. Visto che non posso inviare file , vi posto il codice javascript e CSS del menu che uso io?

Ovviamente, quando ne metti due dello stesso tipo, devi modificare tutti nomi univoci e tutti i riferimenti.
Ad esempio, se il primo menu lo definisci con id="menu" e una sottovoce con id="voce1", ecc., per il secondo menu sarà rispettivamente id="menu2" e id="voce21"


Ciao!

[...]arà rispettivamente id="menu2" e id="voce21"
Ciao!

Volevi dire id="voce2"? cioè, quello è un errore di digitazione o c'è qualche regola del linguaggio di programmazione?

No, non è un errore, pensando alla presenza di altre voci, dovrebbe venire una cosa così:

Menu_1:

1. voce 1
2. voce 2
3. voce 3

Menu_2:

1. voce 1 (menu 2)
2. voce 2 (menu 2)
3. voce 3 (menu 2)

Ciaoooo!!!!

[dmarrr]

Ho capito ma il CSS è strutturato in modo che si applica all'oggetto UL con id "menu

ul#menu {}
ul#menu ol {}
ul#menu li, ul#menu a {}
ul#menu li {}
ul#menu ol li {}
ul#menu ol li:before {}
ul#menu a {}
ul#menu a:hover {}
ul#menu a.active {}

e java

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;

dovrei creare un altro CSS che richiami un altro ID ? Sono un pò confuso.

ul#menu, ul#menu2 {}
ul#menu ol, ul#menu2 ol {}
ul#menu li, ul#menu a, ul#menu2 li, ul#menu2 a {}
ul#menu li, ul#menu2 li {}
ul#menu ol li, ul#menu2 ol li {}
ul#menu ol li:before, ul#menu2 ol li:before {}
ul#menu a, ul#menu2 a {}
ul#menu a:hover, ul#menu2 a:hover {}
ul#menu a.active, ul#menu2 a.active {}

poi duplichi il richiamo delle funzioni javascript (e non java) e rinomini i riferimenti.


Ciao!

[dmarrr]

all'interno della mia pag non richiamo nessuna funzione di javascript includo lo script con

<script language="javascript" type="text/javascript" src="menul.js"></script>

e il menu funziona. Ho mod il CSS e adesso funziona ma il 2° menu non va

EDIT: ecco da dove ho preso il menu
http://javascript.html.it/articoli/l...u-espandibile/
Non c'è modo di fare due menu ?

Secondo me, basterebbe andare nel css e fare in modo che al posto di un id, ci sia un class, che possono essere richiamate più volte.
Dopo aver fatto questo, fai in modoche nel file in java o dove sia, venga richiamata una class e non un id.

[dmarrr]

Ho risolto inserendo un altro tipo di menu verticale più adatto alle mie esigenze. Però questo menu se clicco sulla voce aperta non si richiude. Ecco il codice javascript:

function Menu(id)
{
    var e = document.getElementById(id);
    var a = document.getElementById("menu2").getElementsByTagName("span");
    if (e.style.display != "Block")
    {
        for (var i=0; i<a.length; i++)
        {
            if (a[i].className == "VOCI")
            {
                a[i].style.display = "None";
            }
        }
        e.style.display = "Block";
    }
    else
    {
        e.style.display = "None";
    }
}

. Grazie a tutti per tutti i consigli fino ad ora ricevuti