Costruire un mega menu Webflow: struttura e accessibilità

Alla fine di questa lezione avrai trasformato tre dropdown semplici in mega menu completi e accessibili — colonne di link, banner, CTA e aria label a posto — proprio come i pannelli sul sito di Webflow. È il cuore strutturale della serie; l’animazione arriva dopo.

La lezione ruota attorno a qualche momento “aha”. Il più grande è come far estendere un pannello dropdown edge-to-edge senza hackerare le larghezze. Il secondo è trattare l’intero menu come una lista semantica così è davvero accessibile, non solo bello a vedersi. E una volta costruito un menu, gli altri due sono per lo più copia, cancella e scambia.

Come funziona

Pannelli a tutta larghezza, nel modo pulito. Il pannello del mega menu di Webflow copre tutto il viewport mentre il suo contenuto si allinea al container della navbar. La soluzione ingenua — width: 100vw — va in overflow su Windows perché la scrollbar mangia parte di 100vw (servirebbe 100dvw). Ma il vero problema è l’allineamento: la dropdown list si posiziona rispetto all’antenato più vicino con position: relative, che di default è il wrapper del dropdown, non la navbar. La soluzione elegante è impostare ogni antenato (dropdown, nav menu, content wrapper, main container) su position: static, lasciando solo la navbar su relative. Poiché la navbar è già a tutta larghezza, ora il pannello si estende perfettamente edge-to-edge — senza hack di larghezza.

Struttura = accessibilità. Il mega menu non è un mucchio di div; è liste non ordinate annidate. Gli item della lista esterna sono le colonne; ogni colonna contiene un titolo più una lista interna di link (icona + nome + eventuale label “new” + descrizione). Gli screen reader capiscono le liste, quindi è questa struttura a rendere il menu navigabile. Poi aggiungi significato con aria-label: ogni lista interna riceve un nome di gruppo (Build, Manage, Optimize, Extend…) e l’intero menu il suo (Platform, Solutions, Resources), così le tecnologie assistive annunciano la stessa struttura che i vedenti vedono.

Una struttura, tre menu. Costruisci Platform per intero — quattro colonne più una riga CTA che va a capo (due pulsanti immagine su una seconda riga a tutta larghezza, ottenuta con flex-wrap + grow if possible sulle colonne e una colonna CTA width: 100% impostata su shrink if needed). Poi copia l’intero dropdown-list-container in Resources (cancella la riga CTA) e Solutions (tre colonne, una una variante banner promozionale, più stretta con una combo cc-small).

Le insidie che colpiscono tutti. Il testo dentro il pannello eredita il colore hover della navbar, quindi diventa grigio quando passi sulla navbar — risolvilo impostando il colore della dropdown list esplicitamente su scuro invece di inherit. E gli SVG inline hanno bisogno di due cose per comportarsi bene: fill="currentColor" sul path (così seguono il colore del testo) e un viewBox sul tag svg (così scalano davvero quando li ridimensioni).

Come si usa

1. Rendi il pannello a tutta larghezza. Classe della dropdown list navbar_dropdown-list. Imposta dropdown, nav menu, content wrapper e main container su position: static così la navbar diventa il riferimento; ora il pannello copre il viewport.
2. Aggiungi il container allineato interno. Dentro la lista, aggiungi navbar_dropdown-list-container con max-width: 90rem, margini laterali auto e lo stesso padding orizzontale clamp() del main container, così il contenuto si allinea alla navbar.
3. Dai stile al pannello. Dropdown list: sfondo trasparente con un piccolo padding superiore (il gap sotto la navbar). Content wrapper: sfondo bianco, angoli arrotondati e quattro box-shadow a strati (es. 0 20px 40px, 0 10px 18px, 0 4px 8px, 0 1px 2px).
4. Costruisci liste accessibili. Rendi il content wrapper una lista non ordinata (niente pallini, niente margini). Ogni colonna è un list item (navbar_dropdown-list-column) con un titolo e una lista interna di link item. Disponi le colonne con Flexbox e un gap.
5. Costruisci un link item. Link block = icona (SVG embed, fill="currentColor", viewBox) + un text wrapper (nome semibold, eventuale label “new” inline, descrizione più chiara). Imposta il colore del pannello esplicitamente su scuro così l’hover della navbar non trasborda.
6. Completa Platform. Aggiungi i bordi destri delle colonne (trasparente sull’ultima con cc-last), poi una colonna CTA di seconda riga: attiva flex-wrap, dai alle quattro colonne grow if possible e alla colonna CTA width: 100% + shrink if needed così va a capo a tutta larghezza. Aggiungi due pulsanti immagine CTA che si spartiscono 50/50.
7. Riusa per Solutions e Resources. Copia il container in ciascuno; cancella la riga CTA per Resources; per Solutions usa tre colonne (colonna centrale solo-nomi, un banner promozionale nella terza) e restringi il container con una combo cc-small.
8. Aggiungi le interazioni. Transiziona il colore dei link (300ms ease-out) e rendili blu all’hover; sfuma i pulsanti CTA/banner al 90% di opacità all’hover; assicurati che il toggle di un dropdown aperto resti scuro con il suo underline blu anche mentre passi su altri link.
9. Etichetta tutto. Aggiungi aria-label a ogni lista interna (il nome del gruppo) e alla lista esterna di ogni menu (Platform / Solutions / Resources).

Tre mega menu accessibili, fatti. Prossimo episodio: renderli pienamente responsive.