La navigazione del sito gioca un ruolo fondamentale nell'esperienza dell'utente. Un mega menu ben progettato aiuta a organizzare grandi quantità di contenuti e migliora l'usabilità rendendo più facile e immediato l'accesso alle varie sezioni del sito.
Creare un mega menu responsive in HTML e CSS
In questa guida ti mostreremo come creare un mega menu completamente responsive utilizzando principalmente HTML e CSS, con l'aggiunta di un po' di JavaScript minimale solo quando necessario. Seguendo passo passo questo tutorial, sarai in grado di realizzare un menu elegante, funzionale e perfettamente adattabile a dispositivi di tutte le dimensioni, dai desktop ai tablet e smartphone.
Quali linguaggi serviranno?
Per creare un mega menu responsive, utilizzeremo principalmente HTML per la struttura del menù e dei sotto-menu e CSS per lo stile, il layout e la gestione della responsività. In alcuni casi, un piccolo frammento di JavaScript può essere utile per gestire l'apertura e la chiusura dei sotto-menu sui dispositivi mobili, dove il passaggio con il mouse non è disponibile. Avremo un menù orizzontale principale con più voci, ciascuna delle quali può espandersi in un sotto-menu con più colonne, perfettamente adattabile a qualsiasi larghezza dello schermo.
Il menu sarà fluido, elegante e facile da navigare sia da desktop che da mobile, garantendo un'esperienza utente chiara e intuitiva.
<body>
<!-- Inizio del mega menù -->
<nav class="mega-menu">
<ul class="menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">Servizi</a>
<!-- Sottomenu mega -->
<div class="submenu">
<div class="submenu-column">
<h2>Design</h2>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">UI/UX</a></li>
</ul>
</div>
<div class="submenu-column">
<h2>Sviluppo</h2>
<ul>
<li><a href="#">Front-end</a></li>
<li><a href="#">Back-end</a></li>
<li><a href="#">Full Stack</a></li>
</ul>
</div>
<div class="submenu-column">
<h2>Marketing</h2>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Content Marketing</a></li>
</ul>
</div>
</div>
</li>
<li class="menu-item">
<a href="#">Chi Siamo</a>
</li>
<li class="menu-item">
<a href="#">Contatti</a>
</li>
</ul>
</nav>
<!-- Fine del mega menù -->
</body>In questa struttura HTML possiamo trovare: l'elemento "<nava>" che contiene tutto il menu principale. Al suo interno ogni voce principale è un "<li class="menu-item">" e le voci con sotto-menu hanno un "<div class="submenu">", che può contenere più colonne "submenu-column". Infine ogni colonna ha un titolo "<h2>" e una lista di link "<ul><li><a>".
Il codice CSS
Con questa struttura possiamo già ottenere il menu di base. Il prossimo passo sarà aggiungere lo stile CSS per renderlo visibile, elegante e responsive.
.mega-menu {
background-color: #333;
font-family: Arial, sans-serif;
}
.mega-menu .menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.mega-menu .menu-item {
position: relative;
}
.mega-menu .menu-item a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
transition: background 0.3s;
}
.mega-menu .menu-item a:hover {
background-color: #444;
}In questa prima parte di codice CSS troviamo lo stile di base del menu. Innanzitutto uno sfondo scuro e un font leggibile, poi la lista principale .menu è orizzontale grazie a display: flex. Infine le voci del menu .menu-item a hanno padding, colore bianco ed effetto hover per un feedback visivo.
.mega-menu .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
width: 600px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 1000;
flex-direction: row;
gap: 20px;
}
.mega-menu .submenu-column {
flex: 1;
}
.mega-menu .submenu-column h2 {
margin-top: 0;
color: #fff;
}
.mega-menu .submenu-column ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
.mega-menu .submenu-column ul li a {
color: #ddd;
text-decoration: none;
display: block;
padding: 5px 0;
transition: color 0.3s;
}
.mega-menu .submenu-column ul li a:hover {
color: #fff;
}Qui abbiamo la parte dedicata ai sotto-menu ".submenu", essi sono nascosti di default con display: none. Vengono posizionati sotto la voce principale ("position: absolute; top: 100%"). Hanno uno sfondo leggermente più scuro e un'ombra per distinguersi dal resto del menu. Infine le colonne interne ".submenu-column" sono affiancate grazie a flex e hanno uno spazio tra loro ("gap: 20px").
/* Mostra il sottomenu al passaggio del mouse */
.mega-menu .menu-item:hover .submenu {
display: flex;
}
/* Stile responsive per dispositivi mobili */
@media (max-width: 768px) {
.mega-menu .menu {
flex-direction: column;
}
.mega-menu .submenu {
position: static;
width: 100%;
flex-direction: column;
padding: 0;
box-shadow: none;
}
.mega-menu .submenu-column {
padding: 10px 0;
}
}Inoltre al passaggio del mouse sulla voce principale, il sotto-menu si mostra (.menu-item:hover .submenu { display: flex; }). Questo permette di navigare i sotto-menu facilmente su desktop.
Infine la parte responsive per i dispositivi mobili: su schermi max-width 768px, il menù principale diventa verticale, flex-direction: column. I sotto-menu si posizionano sotto la voce principale, position: static, e le colonne diventano verticali. Gli spazi e padding sono ridotti per adattarsi meglio a schermi piccoli.
Il codice JavaScript per il mega menu
Concludiamo la parte di codice con un piccolo snippet JavaScript che rende il mega menu cliccabile sui dispositivi mobili, così da aprire e chiudere i sotto-menu senza passaggio del mouse:
const menuItems = document.querySelectorAll(".menu-item");
menuItems.forEach((item) => {
const submenu = item.querySelector(".submenu");
if (submenu) {
item.querySelector("a").addEventListener("click", (e) => {
e.preventDefault();
menuItems.forEach((i) => {
if (i !== item) {
const sm = i.querySelector(".submenu");
if (sm) sm.style.display = "none";
}
});
if (submenu.style.display === "flex") {
submenu.style.display = "none";
} else {
submenu.style.display = "flex";
}
});
}
});- Lo script seleziona tutte le voci di menu che hanno un sotto-menu.
- Su click del link principale, impedisce il comportamento predefinito e apre/chiude il sotto-menu corrispondente.
- Chiude automaticamente eventuali altri sotto-menu aperti per mantenere il menu ordinato.
- Funziona soprattutto sui dispositivi mobili dove il passaggio del mouse non è disponibile.
Con HTML + CSS + questo JS, il mega menù è completamente responsive, funzionale e intuitivo sia da desktop che da mobile.
Analisi del risultato finale
Versione desktop:
Versione mobile:
Dopo aver implementato HTML, CSS e il piccolo frammento di JavaScript, il nostro mega menu è finalmente funzionante e completamente responsive. Su desktop, le voci principali rimangono visibili e i sotto-menu si aprono elegantemente al passaggio del mouse, mostrando le colonne dei sotto-menu organizzate e facili da leggere.
Su dispositivi mobile, il menù si adatta automaticamente diventando verticale e, grazie al JS minimale, i sotto-menu possono essere aperti e chiusi con un semplice clic, mantenendo l'esperienza utente chiara e intuitiva. L'uso di flex per la disposizione delle colonne rende il layout fluido e scalabile, mentre i colori e gli effetti hover offrono un feedback visivo immediato.
In questo modo, il menu non è solo esteticamente gradevole, ma anche funzionale, ottimizzato sia per l'usabilità che per la navigazione rapida tra le varie sezioni del sito.
Conclusione
Creare un mega menu responsive è semplice se si seguono i giusti passaggi: partire da una struttura HTML chiara, applicare uno stile CSS flessibile e aggiungere un po' di JavaScript per la gestione su mobile permette di ottenere un menù elegante, funzionale e adattabile a qualsiasi dispositivo.
Questo tipo di navigazione è ideale per siti con molte sezioni o contenuti, perché aiuta gli utenti a orientarsi rapidamente senza sacrificare l'estetica. Con le tecniche illustrate in questa guida, puoi personalizzare colori, layout e animazioni per adattare il menù al design del tuo sito, creando così un'esperienza utente più piacevole e professionale.
