Menu a tendina con i selectbox: il JumpMenu

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni!

Il cosiddetto JumpMenu è un menu a scelta rapida, utile sia per l'utente per una navigazione più agevole, che per lo sviluppatore, onde ottimizzare spazio sulla pagina e risorse.

Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.

Creiamo sia il codice Html che lo script in un'unica routine Javascript:

function JumpMenu(links) {
    //Crea un link all'indice della select selezionato
    location.href = links[links.selectedIndex].value;
}

//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
    voci[0] = "Pagina 1";
    voci[1] = "Pagina 2";
    voci[2] = "Pagina 3";
    voci[3] = "Pagina 4";
    voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni

var link = new Array();
    link[0] = "pagina1.htm";
    link[1] = "pagina2.htm";
    link[2] = "pagina3.htm";
    link[3] = "pagina4.htm";
    link[4] = "pagina5.htm";

//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");

//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
    document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}

document.write("</select>");