CONTATTACI

Blog

Tutorial: come creare un menu a tendina html

Il linguaggio HTML è il pane quotidiani di tutti gli aspiranti (e non) “frontendisti”. Coloro che sviluppano lato frontend devono masticare tanto codice HTML e conoscere le insidie del linguaggio di markup più famoso al mondo.

Cosa vuol dire HTML?

Come già precisato più volte, html è un acronimo di Hypertext Markup Language. Questo è l’HTML per definizione. Viene utilizzato per strutturare le pagine web. Un documento html non è nient’altro che lo scheletro di un sito web, ovvero la base di quello che vedremo e di ciò che sarà.

A cosa serve HTML? 

Questo linguaggio è necessario a tutti gli sviluppatori web per descrivere semanticamente la struttura di un documento web attraverso tag, ad esempio identificando una sezione di testo come intestazione, paragrafo, elenco, collegamento, citazione o altro elemento. HTML e il suo codice rappresentano dunque la struttura portante delle pagine web. Inoltre, HTML e CSS insieme riescono a fornire uno stile unico ed altamente personalizzato del proprio sito web. Chiarite le definizioni, passiamo al sodo e scopriamo come creare un menù html!

Come creare un menù html

In questo articolo vedremo nello specifico come realizzare un menù a tendina in HTML.

Un menu a tendina HTML è un elemento di navigazione molto comune su molti siti web. Consente agli utenti di accedere a diverse sezioni del sito o a sottomenu senza ingombrare troppo spazio sulla pagina. In questo tutorial, ti guiderò passo dopo passo nel processo di creazione di un menu a tendina attraverso HTML e CSS.

1) Preparazione del Codice HTML

Inizia creando un nuovo documento HTML. Puoi farlo aprendo un editor di testo semplice, come il Blocco Note, e salvando il file con l’estensione “.html”. In alternativa puoi utilizzare un ambiente di lavoro più adeguato, come ad esempio VS Code. All’interno del documento, crea una struttura di base per il tuo menu a tendina utilizzando il seguente codice:

 

<!DOCTYPE html>

<html>

<head>

 <title>Menu a Tendina HTML</title>

 <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

 <nav>

   <ul>

     <li><a href="#">Home</a></li>

     <li><a href="#">Prodotti</a>

       <ul>

         <li><a href="#">Prodotti 1</a></li>

         <li><a href="#">Prodotti 2</a></li>

         <li><a href="#">Prodotti 3</a></li>

       </ul>

     </li>

     <li><a href="#">Servizi</a></li>

     <li><a href="#">Contatti</a></li>

   </ul>

 </nav>

</body>

</html>

 

In questo esempio, abbiamo creato una struttura di base per il menu a tendina utilizzando una lista non ordinata (ul) e gli elementi di elenco (li). Il menu a tendina è rappresentato dal sottomenu con gli elementi di elenco annidati.

 

 

2) Stile del Menu a Tendina con CSS

Ora che abbiamo creato la struttura del menu a tendina, dobbiamo applicare lo stile ad esso utilizzando CSS. Crea un nuovo file CSS chiamato “style.css” nello stesso percorso del tuo file HTML e aggiungi il seguente codice:

 

nav ul {
    list-style: none;
    padding:0;
    margin:0;
    background-color:#f2f2f2;
}

nav ul li {
    display:inline-block;
}

nav ul li a {
    display: block;
    padding:10px20px;
    color:#333;
    text-decoration: none;
}

nav ul li:hover {
    background-color:#ddd;
}

nav ul li:hover > ul {
    display: block;
}

nav ul ul {
    display: none;
    position: absolute;
    background-color:#f2f2f2;
}

nav ul ul li {
    display: block;
}

nav ul ul li a {
    padding:10px30px;
    color:#333;
}

nav ul ul li a:hover {
    background-color:#ddd;
}

 

Questo stile di base fornirà un aspetto semplice e funzionale al tuo menu a tendina. Puoi personalizzare il colore di sfondo, i margini, il padding e altri attributi CSS per adattarlo al tuo design.

 

3) Visualizzazione del Menu a Tendina

Puoi lanciare in locale il tuo documento HTML nel tuo browser preferito per visualizzare il menu a tendina. Ora, quando passi il mouse sopra l’elemento “Prodotti” nel menu principale, vedrai il sottomenu a tendina con gli elementi di elenco annidati.

 

Creare un menu a tendina in HTML è relativamente semplice utilizzando una combinazione di HTML e CSS. Seguendo i passaggi di questo tutorial, sei in grado di creare in HTML un menu a tendina funzionale e personalizzabile per il tuo sito web. Sperimenta con stili e opzioni aggiuntive per adattare il menu a tendina alle tue esigenze specifiche. Ricorda che per migliorare la tua scrittura HTML, è sempre cruciale avere a che fare con il codice di quest’ultimo. Questo tutorial ti ha stuzzicato e vuoi approfondire il mondo del linguaggio html? Corri a leggere la nostra guida all’html e css in italiano!

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.