Come creare un menu a discesa casella di riepilogo con i link

September 2

Come creare un menu a discesa casella di riepilogo con i link


La maggior parte dei siti web presenti elementi di navigazione che utilizzano blocchi di opzioni che corrono sia nella parte superiore della pagina o verso il basso uno dei suoi lati. Poiché queste strutture di navigazione presenti tutte le opzioni disponibili, offrono una grande quantità di informazioni contestuali. Tuttavia, essi occupano anche spazio considerevole schermo. I progettisti con una quantità limitata di spazio possono invece scegliere di utilizzare i menu a discesa contenente un elenco di elementi che si espande solo quando selezionato. Creare questo tipo di struttura di navigazione sulla tua pagina web usando HTML e JavaScript.

istruzione

1 Aprire la pagina Web e visualizzare il codice. Se si utilizza un editor di testo, è sufficiente aprire la pagina nell'editor e selezionare la riga di codice in cui si desidera che il menu a discesa aggiunto. Se si utilizza un editor web visiva, invece (ad esempio Adobe Dreamweaver o Microsoft Expression Web), aprire la pagina e cliccare sulla posizione della pagina in cui si desidera visualizzare il menu a discesa. Dopo questo modo, modificare la modalità di visualizzazione a vista Codice. Questo vi mostra il codice HTML che determina il contenuto e l'aspetto della tua pagina.

2 Premere il tasto "Enter" per creare una riga vuota.

3 Copia e incolla il seguente codice sulla riga vuota:

<Form name = "link">
<Select name = "menu">
<Opzione selezionata> Seleziona il tuo link </ option>
<Option value = "campione"> http://www.sample.com/ "> sito web Esempio 1 </ option>
<Option value = "campione"> http://www.sample.com/ "> sito web Esempio 2 </ option>
<Option value = "campione"> http://www.sample.com/ "> sito web Esempio 3 </ option>
</ Select>
<Input type = "button" onclick = "location = document.link.menu.options [document.link.menu.selectedIndex] .value;" value = "Go">
</ Form>

4 Aggiornare i parametri di collegamento per soddisfare le vostre esigenze di progettazione. Inserisci il testo predefinito in cima alla lista modificando il valore direttamente dopo il <option selected> tag; modificare l'URL di ogni elemento successivo regolando il parametro valore corrispondente; e sostituire il testo "sito di esempio" con il testo del link desiderato. È inoltre possibile sostituire il testo contenuto nel parametro value del tag <input> per aggiornare il testo che appare sul pulsante "Invia".

5 Salvare la pagina web e poi aprirlo nel browser. Selezionare un'opzione dall'elenco a discesa e quindi fare clic sul pulsante adiacente per accedere all'opzione selezionata.