[JSP] Menu di navigazione verticali

[Shadow976]

buonasera a tutti,
nella mia applicazione JSP realizzata con NetBeans vorrei creare un menù verticale di navigazione tra le pagine che sia a tendina. Però statico. Mi spiego meglio: non voglio che sia sufficiente passare sul pulsante per visualizzare le voci sottostanti, vorrei proprio che sia necessario cliccare sulla voce sovrastante. E poi non voglio che le voci compaiano affiancate ma sotto la voce sovrastante. Avete qualche frammento di codice per realizzare tutto ciò nel modo più semplice possibile? Faccio un esempio nel quale solo la voce 2 è espansa. Vi ringrazio in anticipo e spero di essermi spiegato bene.

Voce1
Voce 2
voce2.1
voce2.2
voce2.3
Voce 3
Voce 4

[mirkoagrati]

Ciao,
se non ho capito male quello che ti serve è un menù come quello che trovi qui: http://mirkoagrati.110mb.com/articoli.php?page=articoli

E' il mio sito, puoi tranquillamente guardare il codice sorgente della pagina e farti un'idea di come lo ho realizzato.

Basta che non riutilizzi la stessa interfaccia grafica (colori, immagini ecc...)

Ciao

[Shadow976]

Sei gentilissimo; è esattamente quello che mi serve. Forse per mia inesperienza non capisco quel sorgente. Vedo solo che al click di un pulsante deve attivarsi una certa function, e fin qui ci sono. Ma non riesco proprio a capire il contenuto di quella function, potresti spiegarmi un pò meglio come fare una function che renda invisibili i pulsanti figli? Grazie ancora.

[mirkoagrati]

Ciao,
dunque la function è questa:

function mngChilds(elem){
   //Per ogni elemento figlio di quello su cui hai cliccato
   for(var i=0;i<elem.childNodes.length;i++){
      //Se è l'immagine (la freccia su/giu) la alterno
      if(elem.childNodes[i].nodeName == 'IMG'){
         var paths = elem.childNodes[i].src.split('/');
     var finalPath = '';

     paths[paths.length-1] == 'up.gif'
        ? paths[paths.length-1] = 'down.gif'
        : paths[paths.length-1] = 'up.gif'

     for(var u=0; u<paths.length;u++){
        finalPath += paths[u];
        if(u < (paths.length - 1))
           finalPath += '/';
     }
         //Quindi l'attributo src del tag <img /> viene valorizzato con l'indirizzo dell'immagine
     elem.childNodes[i].src = finalPath;

      }
      
      
      //Se è un elemento dell'elenco
      if(elem.childNodes[i].nodeName == 'UL'){
    for(var u=0; u<elem.childNodes[i].childNodes.length; u++){
           //assegno una classe CSS per mostrare o nascondere l'elenco
       elem.childNodes[i].childNodes[u].className == 'invisible'
        ? elem.childNodes[i].childNodes[u].className = ''
        : elem.childNodes[i].childNodes[u].className = 'invisible';
    }
      }
   }
} 

Sono stato un po' sintetico, ma non c'è molto da dire.
Sempre tra gli articoli del mio sito puoi trovare informazioni sul DOM e su
come scorrerlo con JavaScript, XPath ecc...

Ciao