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.
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  dal menu  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).

.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  o ):

<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>
12. **Controlla il codice che hai creato alla ricerca di errori o imperfezioni.** Il documento HTML finale dovrebbe avere la seguente struttura:

<!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>
{"url": "https://www.wikihow.it/Creare-un-Menu-a-Tendina-in-HTML-e-CSS", "language": "it"}