Come creare una casella di riepilogo

February 15

Come creare una casella di riepilogo


Uno dei maggiori problemi che affliggono uno sviluppatore web è come condensare grandi quantità di informazioni e di un gran numero di link in una piccola, area visibile che un utente può facilmente navigare senza perdersi. Un modo semplice per mettere molti collegamenti differenti in un piccolo spazio è quello di creare una casella di menu a discesa. Quando un utente fa clic sulla casella, si espande per rivelare tutti i link presenti nel menu. È possibile creare un menu a tendina con l'aggiunta di poche righe di codice JavaScript per la vostra pagina web.

istruzione

1 Aprire il programma di navigazione web e accedere al tool di gestione codice HTML del tuo sito web, o in alternativa aprire un file di testo, se si caricano file HTML al tuo sito web tramite un programma FTP. Salvare il file di testo con estensione ".html" per convertirlo in un file HTML.

2 Digitare l'apertura <head> e di chiusura </ head> tag HTML nella parte superiore del file. Lasciate che il browser web sa che si sta per essere utilizzando il codice JavaScript posizionando il <script language = JavaScript> tag in qualsiasi punto all'interno del tag <head>. Premere il tasto Invio per passare alla riga successiva all'interno del tag <head>.

3 Aggiungere la funzione Javascript "navigare" all'interno del tag <head> digitando la funzione "Navigate () {." Colpite ancora una volta il tasto Invio per spostarsi verso il basso alla riga successiva e utilizzare la funzione "NavSelect" per impostare la casella a discesa digitando out "var = discesa NavSelect.selectedIndex ;."

4 Colpite ancora una volta il tasto Invio e digitare fuori "location.href = NavSelect.options [discesa] .value ;." Terminare la funzione di navigazione inserendo un finale "}" simbolo nella riga successiva. Lasciate che il browser sa che il codice Javascript è finito per andare alla riga successiva e digitando </ script>.

5 Scendete un'altra linea e aggiungere in apertura <body> e chiusura </ body> tag. Creare il calo effettivo scatola stessa all'interno del tag <body> digitando fuori giù <select name = "NavSelect" onChange = "Naviga (this.form")>. Vai giù alla riga successiva e aggiungere nel sito web per il collegamento da e per le parole che si desidera visualizzare nel menu a discesa utilizzando la funzione "opzione", ad esempio "<option value =" Ehow.com "> http: / /www.ehow.com "rel =" nofollow "> Ehow.com". Aggiungere nel maggior numero di opzioni extra, come si desidera nel menu a discesa scendendo alla riga successiva e l'aggiunta di un'altra istanza della funzione "opzione" .

6 Termina il codice per la casella a discesa immettendo nella chiusura </ select> tag.

Consigli e avvertenze

  • Non vi è alcun limite al numero di opzioni è possibile inserire in una casella a discesa, ma se si mette troppi, l'utente potrebbe dover scorrere verso il basso per visualizzare tutti. Se si dispone di più di 10 o 15 opzioni nel menu, si può prendere in considerazione la rottura delle opzioni in due o più menu a discesa.