Un menu a tendina è uno degli elementi di navigazione più diffusi nel web design moderno. Utilizzato in siti web di ogni tipo e dimensione, consente agli utenti di esplorare le diverse sezioni in modo semplice e intuitivo. Ottimizzando lo spazio disponibile e migliorando l'esperienza utente.
L'importanza di un menu a tendina risiede nella sua capacità di organizzare contenuti complessi, evitando di sovraccaricare visivamente la pagina. Con un menu di questo tipo le voci di navigazione secondarie sono nascoste fino a quando non vengono richieste. Permettendo una navigazione senza distrazioni.
Questa guida offre una soluzione rapida e flessibile per creare un menu a tendina utilizzando solo HTML e CSS. È ideale sia per chi sta iniziando con il web design, sia per chi cerca un modo rapido per implementare un menu senza l'uso di JavaScript. Verrà spiegato come aggiungere ad un sito un menu chiaro e funzionale che migliora l'usabilità e dà un tocco di professionalità al design.
Il menu che verrà realizzato in questa guida è interamente personalizzabile con CSS e il risultato che otterremo sarà il seguente:
HTML e CSS: linguaggi e conoscenze richieste
Per realizzare il menu a tendina descritto in questa guida è richiesta la conoscenza di due linguaggi fondamentali per il web design: HTML e CSS. Il primo, per definire la struttura e il contenuto di una pagina web, che servirà a creare la struttura del menu e dei sottomenu organizzando le voci in una lista ordinata e facile da personalizzare. Il secondo permette di controllare l'aspetto degli elementi HTML come colori, dimensioni, spaziature e posizionamento. In questo tutorial CSS sarà fondamentale per rendere il menu esteticamente gradevole oltre che per nascondere e mostrare i sottomenu al passaggio del mouse e aggiungere effetti di transizione e animazione.
Struttura del menu con HTML
La prima cosa da fare è creare la struttura del menu all'interno della pagina HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu a Tendina</title>
<link rel="stylesheet" href="style.css">
</head>Dopo aver configurato la pagina con questi valori si può passare al body:
<body>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Servizi</a>
<ul class="submenu">
<li><a href="#">Servizio 1</a></li>
<li><a href="#">Servizio 2</a></li>
<li><a href="#">Servizio 3</a></li>
</ul>
</li>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
</body>In questo caso si è scelto di creare un body con un elemento <nav> che consente di organizzare la sezione per i collegamenti di navigazione. Al suo interno è utile posizionare un elemento <ul>, cioè una lista non ordinata nella quale inserire i tag <li> corrispondono ognuno ad una voce del menu.
In questo esempio, il menu contiene l'elemento "Servizi" che apre un sottomenu con ulteriori opzioni. Quindi la voce "Servizi" presenta sotto di essa ulteriori 3 tag <li> che consistono in voci secondarie associate a quell'opzione. È importante notare come all'interno di ogni tag <li> sia stato posizionato l'elemento <a> che permette di associare ad ogni pulsante un link accessibile quando viene premuta l'opzione.
Il foglio di stile CSS
Per quanto riguarda lo stile si procede creando il file style.css, al suo interno il primo elemento sarà il body che avrà questi valori:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}Successivamente si può passare a personalizzare ogni voce del menu, quindi i tag <li> che avranno il seguente stile:
.menu ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
}In questo modo si elimina il rientro e il margine e si assegna un colore di sfondo al menu.
.menu ul li {
position: relative;
display: inline-block;
}Così vengono poi posizionate le voci del menu in orizzontale, uno accanto all'altro.
.menu ul li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: block;
}Grazie a queste proprietà vengono modificati i tag <a> all'interno di ogni elemento del menu affinché non venga visualizzata la sottolineatura sotto ogni link. Inoltre viene assegnato un colore chiaro e leggibile sullo sfondo e con il padding si crea un rientro laterale su ogni pulsante.
Il sottomenu
Una volta personalizzato il menu principale si può passare alla modifica del sottomenu che comparirà al passaggio del mouse sulla voce "Servizi".
.menu ul li .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
}
.menu ul li .submenu li {
display: block;
}In questo modo viene creata una sezione con sfondo di colore differente e la sua posizione sarà gestita manualmente in modo che venga posizionato direttamente sotto l'elemento "Servizi". Ma soprattutto questo sottomenu sarà inizialmente nascosto grazie alla proprietà display: none. Comparirà solo al passaggio del mouse. Inoltre, ogni elemento del sottomenu avrà un posizionamento ordinato in verticale uno sotto l'altro.
.menu ul li:hover .submenu {
display: block;
}Grazie alla proprietà hover è possibile mostrare il sottomenu quando viene passato il mouse su "Servizi".
Personalizzare il menu con CSS
La creazione del menu è conclusa. Ora è possibile aggiungere una personalizzazione ulteriore per renderlo più fluido e attraente.
.menu ul li .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
opacity: 0;
transition: opacity 0.3s ease;
}
.menu ul li:hover .submenu {
display: block;
opacity: 1;
}Questo codice posiziona il sottomenu in modo assoluto rispetto all'elemento <li> che lo contiene. Permettendo di disporlo in modo preciso rispetto al menu principale.
Inoltre, rende il sottomenu completamente trasparente, in modo che non sia visibile finché non viene attivato. Infine, grazie a transition viene applicata una transizione di 0,3 secondi sull'opacità, con un effetto di ingresso e uscita graduale (ease). Questa proprietà rende l'apertura del menu più fluida. Il codice permette infatti al sottomenu di rimanere nascosto finché l'utente non passa con il mouse sull'elemento principale del menu.
Grazie alla transizione impostata su opacity, l'effetto di apertura è graduale migliorando l'estetica e la fluidità del menu a tendina.
Conclusione
Il gioco è fatto! Adesso abbiamo finalmente il menu che desideravamo. Esso avrà una voce "Servizi" contenente delle sottovoci che saranno visibili al passaggio del mouse su di essa. In questo modo si crea un effetto fluido e graduale migliorando l'estetica e l'interazione con l'utente.
Un menu a tendina ben progettato migliora l'usabilità di un sito, rendendo facile la navigazione senza sovraccaricare la pagina. L'approccio basato su HTML e CSS offre una soluzione leggera ed efficiente che non richiede l'uso di JavaScript per ottenere un effetto interattivo.
Questo tipo di menu può essere adattato e ampliato per soddisfare esigenze più complesse, Rappresenta una base solida per chiunque desideri perfezionare le proprie competenze di web design. Con questi concetti fondamentali si può facilmente integrare un menu a tendina su qualsiasi progetto web aggiungendo nuove funzionalità.
