Come Creare un Menu a Tendina in HTML e CSS

Questo articolo spiega come creare un menu a discesa all'interno di un sito web utilizzando il codice HTML e i fogli di stile CSS. Il menu a tendina verrà visualizzato quando l'utente posizionerà il puntatore del mouse sul relativo pulsante. Non appena il menu viene visualizzato a video, l'utente sarà in grado di selezionare le voci che contiene per eseguire le relative azioni. In questo caso gli elementi del menu a tendina saranno composti da link HTML a pagine web.

Passaggi

Scarica PDF

1
Apri il programma che utilizzi normalmente per creare il codice HTML. Puoi usare tranquillamente un editor di testo gratuito come Blocco Note o TextEdit, oppure puoi optare per un programma più avanzato (ma sempre gratuito) come Notepad++.
- Se hai scelto di utilizzare Notepad++, prima di continuare assicurati di selezionare l'opzione HTML dal menu Linguaggio posto nella parte superiore della finestra del programma.
2
Inserisci il codice HTML che definisce l'inizio del tuo nuovo documento. Si tratta dell'intestazione in cui vengono dichiarati il tipo di contenuto del documento e la struttura principale:
```
<!DOCTYPE html><html><head><style>
```
3
Crea il menu a discesa. Usa il seguente codice per determinare l'aspetto grafico che avrà il menu, come dimensione e colori. Assicurati di sostituire il simbolo "#" con il numero che rappresenterà le dimensioni del menu (più grande sarà il numero, maggiori saranno le dimensioni). Puoi anche modificare il valore delle voci "background-color" e "color" in modo da personalizzare il menu con le colorazioni che preferisci (in questo caso puoi anche utilizzare un codice esadecimale per definire i colori da usare).^{[1]XFonte di ricerca}
```
.dropbtn {    background-color: black;    color: white;    padding: #px;    font-size: #px;    border: none;}
```
4
Dichiara di voler popolare il menu a discesa con dei link. Questo blocco di codice serve per indicare al browser che i link che comporranno l'elenco di opzioni del menu e che andrai ad aggiungere successivamente verranno collocati all'interno del menu a tendina. Usa il seguente codice:
```
.dropdown {    position: relative;    display: inline-block;}
```
5
Scegli l'aspetto grafico che avrà il menu a tendina. La seguente porzione di codice serve per dichiarare la dimensione e le colorazioni che avrà il menu e per indicare al browser la posizione che assumerà in base agli altri elementi presenti nella pagina web. Assicurati di sostituire il simbolo "#" del parametro "min-width" con il numero che preferisci (per esempio 250) e di cambiare il valore della voce "background-color" utilizzando il colore o il codice esadecimale che desideri.
```
.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: #px;    z-index: 1;}
```
6
Aggiungi le informazioni per formattare il contenuto del menu a discesa. Il seguente codice serve a definire il colore e la dimensione del testo che verrà visualizzato all'interno del pulsante del menu. Anche in questo caso, sostituisci il simbolo "#" con il numero di pixel che determineranno la dimensione del pulsante che servirà per aprire il menu a tendina.
```
.dropdown-content a {    color: black;    padding: #px;    text-decoration: none;    display: block;}
```
7
Definisci l'azione che verrà eseguita quando il puntatore del mouse verrà posizionato sul pulsante del menu. In questo caso alcune colorazioni dell'elemento dovranno variare. In primo luogo il colore dell'elemento del menu che verrà scelto dovrà variare per indicare che è stato selezionato (in questo caso se ne occuperà il primo elemento "background-color" del codice di esempio). Per modificare il colore del pulsante del menu verrà utilizzato il secondo elemento "background-color" del codice mostrato. Normalmente entrambi i colori scelti dovrebbero essere più chiari di quelli usati per definire l'aspetto grafico del menu quando non è selezionato.
```
.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}
```
8
Chiudi la sezione del documento in cui hai inserito il codice CSS. Usa il seguente codice per indicare al browser che la porzione di dati relativa alla definizione degli elementi CSS è completa:
```
</style></head>
```
9
Aggiungi il testo che verrà visualizzato all'interno del pulsante che attiverà il menu a discesa. Usa il seguente codice assicurandoti di sostituire il parametro "nome" con il nome che avrà il menu (per esempio Menu o Collegamenti):
```
<div class="dropdown"><button class="dropbtn">nome</button><div class="dropdown-content">
```
10
Popola il menu con i link che desideri usare. Ogni elemento che verrà visualizzato all'interno del menu a discesa dovrebbe corrispondere al link a una pagina interna o esterna al sito web in oggetto. Per popolare il menu a discesa appena creato, usa il seguente codice. Assicurati di sostituire il parametro https://www.sitoweb.com con l'URL che vuoi usare (senza eliminare le virgolette) e il parametro "nome" con il nome che desideri appaia nel menu.
```
<a href="https://www.sitoweb.com">nome</a><a href="https://www.sitoweb.com">nome</a><a href="https://www.sitoweb.com">nome</a>
```
11
Completa la struttura del documento. Inserisci i seguenti tag HTML di chiusura per completare la struttura del documento che stai creando:
```
</div></div></body></html>
```

How.com.vn Italiano: Step 12 Controlla il codice che hai creato alla ricerca di errori o imperfezioni.

Il documento HTML finale dovrebbe avere la seguente struttura:^{[2]XFonte di ricerca}

<!DOCTYPE html><html><head><style>.dropbtn {    background-color: black;    color: white;    padding: 16px;    font-size: 16px;    border: none;}.dropdown {    position: relative;    display: inline-block;}.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: 200px;    z-index: 1;}.dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;}.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}</style></head><div class="dropdown"><button class="dropbtn">Social Network</button><div class="dropdown-content"><a href="https://www.google.com">Google</a><a href="https://www.facebook.com">Facebook</a><a href="https://www.youtube.com">YouTube</a></div></div></body></html>

Consigli

Prima di pubblicare online il tuo sito, testa sempre le varie funzionalità verificando che funzionino correttamente.
Il codice proposto nell'articolo serve a creare un menu a discesa che venga visualizzato automaticamente non appena il puntatore del mouse viene posizionato sul pulsante del menu. Se hai la necessità di creare un menu a tendina che venga visualizzato solo quando l'utente preme il pulsante, dovrai utilizzare un JavaScript.^{[3]XFonte di ricerca}

Avvertenze

All'interno del codice HTML la scelta dei colori è abbastanza limitata quando si usano i tag testuali come "black" o "green". Puoi ampliare la gamma dei colori utilizzando un generatore di codici esadecimali per creare tonalità personalizzate. Prova per esempio questo sito web.