Come fare un menu a tendina da una lista

July 16

Caselle a discesa sono una caratteristica interfaccia utente web comune. Gli utenti di Internet sono abituati a usare e interagire con caselle a discesa. Inoltre, sono facili da implementare. Se sei un web designer o sviluppatore, caselle a discesa sarà una parte essenziale del vostro toolkit interazione con l'utente. Essi richiedono meno lavoro da usare rispetto semplice metodo di scrittura e chiedono meno dell'utilizzatore. Questo è molto utile, in quanto gli utenti in genere non piace pensare troppo a come interagire con il sito.

istruzione

Rendere la casella a discesa

1 Aprite il vostro editor di testo preferito. Ha bisogno di essere in grado di salvare in formati di file arbitrari o lasciare che voi, l'utente, specificare un formato. Abbiamo bisogno di questa caratteristica, perché abbiamo bisogno di salvare la pagina in formato ".html".

2 Digitare l'elenco di elementi che desideri avere in una casella a discesa.

3 Mettere un tag "<select>" sopra l'elenco degli elementi nella casella a discesa e mettere un "</ select>" tag di seguito l'elenco delle voci nella tua casella a discesa. Questi tag dirà il browser web che il contenuto tra le appartiene in una casella a discesa.

4 Racchiudere ciascuna delle voci nel proprio elenco con i tag "<option>" e "</ option>." Questi dicono al browser che ogni elemento tra i tag è un'opzione nella tua casella a discesa.

5 Salvare il file con qualsiasi nome e aggiungere l'estensione ".html". È quindi possibile aprire la pagina con il browser Web e guardare il menu a tendina.

Posizionamento e Styling tua casella a discesa

6 Aggiungere una proprietà di stile per il tag "<select>" della vostra casella a discesa. La nuova etichetta dovrebbe essere simile "<select style =" ">". Questo è dove tutte le informazioni su come il giù goccia dovrebbe apparire andrà.

7 Aggiungere i margini per posizionare la casella a discesa. Il tuo "<select>" tag dovrebbe apparire come "<select style =" margin-top: 100px; ">". Le quattro proprietà dei margini disponibili sono margin-top, margin-bottom, margin-left e margin-right. È possibile combinare più proprietà in proprietà di stile. Essi devono essere separati da un punto e virgola in questo modo: "<select style =" margin-top: 100px; margin-left: 100px; ">".

8 Aggiungere tutti gli altri stili che si desidera la casella. È possibile cambiare il colore aggiungendo la proprietà background-color come "<select style =" margin-top: 100px; margin-left: 100px; background-color: red; ">".