Programmazione Web » Javascript » Realizzare un menu a tendina con i Selectbox
Realizzare un menu a tendina con i Selectbox
Difficoltà:
Scritto da Luca Ruggiero
Sito Web: http://www.lucaruggiero.it 
Questo tutorial è stato letto 1296 volte
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>");
Aggiungi questo tutorial ai preferiti
