Tutorial su come Pull Down Menu in Java Script

August 10

JavaScript consente di creare calo dinamico (pull) down menu. codice JavaScript è normalmente racchiuso direttamente nel documento HTML che elimina la necessità di due file, uno per il documento HTML e uno per lo script. Il codice JavaScript può essere trovato in qualsiasi parte del documento, ma è spesso collocato nella sezione head. Il codice viene chiamato nel corpo del documento.

Codice JavaScript

Lo script incluso in questo articolo creerà un menu a discesa che porterà l'utente a una nuova pagina web, non appena si seleziona l'opzione.

La prima funzione creerà un array.

funzione createArray ()
{Var arg = createArray.arguments
ANDARE
for (var i = 0; i <arg.length; i ++)
{Questo [i] = arg [i]; }
this.length = arg.length
ANDARE
}

Poi si compila la matrice con l'indirizzo web (URL) per le voci di menu. Se si dispone di più di un menu nella vostra pagina web, è possibile creare più di un array.

var gli URL = new createArray (
\ "Http: //yahoo.com \ & quot ;,
\ "Http: //google.com \ & quot ;,
\ "Http: //msn.com \ & quot ;,
\ "Http: //facebook.com \ & quot ;,
\ "Http: //myspace.com \ & quot;)
ANDARE

L'ultima funzione JavaScript si aprirà l'opzione di menu nella stessa finestra come pagina corrente.

Funzione openURL (che)
{M = which.selectedIndex;
URL = Gli URL [m]
ANDARE
location.href = URL; }

Le voci di menu hanno ciascuno un numero di indice. Questo numero viene fatto riferimento nel "m = which.selectedIndex" dichiarazione. Il numero indice è utilizzato nelle "URL = Gli URL [m]" dichiarazione che ottiene l'URL corretto dalla matrice. Il "location.href = URL" dichiarazione dice al browser di andare al nuovo sito web.

documento HTML

Il codice JavaScript viene inserito all'interno degli elementi di script nella sezione head del documento HTML. Si dovrebbe anche racchiudere il codice all'interno di un commento in modo che non sarà letto dai browser che non supportano lo scripting.

<Head>
<SCRIPT LANGUAGE = \ "JavaScript \"> <! -
Codice JavaScript
// ->
</ SCRIPT>
</ Head>

La forma effettiva viene creato nella sezione body del documento. Si è creato con l'elemento di selezione ei nomi dei siti web si svolgono all'interno degli elementi di opzione. Non si aggiungono gli indirizzi web come valori per l'elemento opzione come si tengono nella matrice creata in precedenza.

<Body>
<Form name = \ "forma \">
<Select name = \ "menù \" onChange = \ "openURL () \">
<Option> Yahoo </ option>
<Option> Google </ option>
<Option> MSN </ option>
<Option> Facebook </ option>
<Option> MySpace </ option>
</ Select>
</ Form>
</ Corpo>

È possibile aggiungere ulteriori funzionalità con l'aggiunta di eventi mouseover per creare menu scorrevoli. È inoltre possibile aggiungere più menu con l'aggiunta di un numero alla variabile array e poi passando quel numero per il "openURL) (" la funzione.