Come Creare un Menu a Tendina in HTML e CSS

Scritto in collaborazione con: Lo Staff di wikiHow

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

  1. 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. 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. 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]
    .dropbtn {
        background-color: black;
        color: white;
        padding: #px;
        font-size: #px;
        border: none;
    }
    
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12
    Controlla il codice che hai creato alla ricerca di errori o imperfezioni. Il documento HTML finale dovrebbe avere la seguente struttura:[2]
    <!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]

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.

Informazioni sull'Articolo

Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.

Categorie: Programmazione

In altre lingue:

English: Create a Dropdown Menu in HTML and CSS, Español: crear un menú desplegable con HTML y CSS, Deutsch: Ein Dropdown Menü mit HTML und CSS erstellen, Português: Criar um Menu Suspenso em HTML e CSS, Русский: создать выпадающее меню на HTML и CSS, Français: créer un menu déroulant en HTML et CSS, Nederlands: Een dropdown menu maken met HTML en CSS, 中文: 使用HTML和CSS制作下拉菜单, Bahasa Indonesia: Membuat Menu Dropdown di HTML dan CSS, العربية: إنشاء قائمة منسدلة في HTML وCSS

Questa pagina è stata letta 45 820 volte.
Hai trovato utile questo articolo?