Più menù verticali nella stessa pag

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!

Citazione:

---

Originalmente inviato da debug

[...]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!!!!

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

Codice:

---

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

Codice:

---

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.

Codice:

---

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!

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

Codice:

---

<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.

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:

Codice:

---

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 :razz: