Un mega menu è una voce di navigazione che, al passaggio del mouse, non apre un elenco stretto ma una superficie ampia con più colonne, immagini o indicazioni. Per gli shop e i siti di grandi dimensioni ha senso. Per i piccoli siti aziendali è quasi sempre il segnale che la struttura non funziona.
Per questo qui trova entrambe le cose: la realizzazione e, prima, la domanda onesta se ne ha davvero bisogno.
Le serve davvero?
Un mega menu inizia ad avere senso da circa venticinque o trenta pagine di destinazione che si lascino ordinare in gruppi sensati — uno shop con molte categorie, un ente di formazione con un'offerta di corsi ampia, un produttore con più linee di prodotto.
Su un sito di otto pagine è fine a se stesso. Se usa un mega menu per distribuire otto voci su una superficie grande, il risultato non sembra più professionale, sembra indeciso.
E se ha la sensazione che senza mega menu la sua navigazione non stia in piedi, allora non ha un problema di menu: ha troppe pagine. La strada migliore, in quel caso, è accorpare i contenuti, non ingrandire la navigazione.
Realizzazione con Elementor
Da qualche tempo Elementor Pro porta con sé un widget mega menu dedicato. È la via più semplice, perché struttura del menu e grafica stanno nello stesso punto.
Elementor Pro: il widget mega menu e il Theme Builder in cui lo inserisce fanno parte della versione Pro. Scopri Elementor Pro
Il procedimento:
- Il menu vero e proprio lo crea come sempre in Aspetto → Menu. La struttura — voci principali e sottovoci — nasce lì, non in Elementor.
- Nel Theme Builder apre la sua intestazione; come si costruisce è spiegato in Theme Builder per header e footer.
- Inserisce il widget mega menu e seleziona il menu.
- Per ogni voce principale che deve ricevere una superficie ampia, progetta il contenuto a comparsa direttamente nell'editor — con container, testo, immagini, pulsanti.
L'area a comparsa è una normale area di Elementor. Vale a dire: tutto ciò che può costruire altrove, può costruirlo anche qui. Ed è proprio lì che sta la tentazione di esagerare.
Una struttura che ha dato buoni risultati
Tre o quattro colonne, ciascuna con un titolo breve e sotto quattro-sei link. Nell'ultima colonna qualcosa di visivo — un'immagine, un richiamo a un'offerta attuale, un pulsante di contatto.
Quello che evito: più di quattro colonne, più di circa otto link per colonna e un'immagine per ogni singolo link. Un menu che si deve leggere ha mancato il suo scopo — deve dare orientamento, non trasportare contenuti.
La parte che va storta più spesso: il telefono
Il mega menu è un fenomeno da desktop. Sullo schermo di un telefono non esiste una superficie ampia da aprire.
Faccia in modo che su mobile compaia un elenco sobrio e impilato — voci principali toccabili, sottovoci apribili sotto di esse. Le immagini e gli elementi accessori della vista desktop vanno nascosti su mobile.
Verifichi tre cose su un dispositivo reale: ogni voce si riesce a colpire con il pollice? Si riesce a uscire senza ricaricare la pagina? E l'elenco si può scorrere quando è più lungo dello schermo? L'ultimo punto è quello che si trascura più spesso — con un menu lungo, le voci in fondo altrimenti non sono semplicemente raggiungibili. Il mio metodo a riguardo: ottimizzare Elementor per il mobile.
Usabilità
Due punti che si dimenticano spesso.
Uso da tastiera. Il menu deve potersi percorrere con il tasto Tab, e l'area aperta non deve richiudersi subito. Lo verifichi una volta — è questione di un minuto.
Apertura ritardata. Un'area che si apre e si chiude al minimo movimento del mouse è fastidiosa. Un breve ritardo di circa 150 millisecondi rende il comportamento molto più tranquillo.
Tempi di caricamento
Il contenuto a comparsa viene caricato comunque, anche se nessuno lo apre — e per giunta su ogni pagina, perché sta nell'intestazione. Un mega menu con dodici immagini rallenta quindi l'intero sito.
Tenga le immagini piccole e poche. Che cosa significa per i valori misurati è spiegato in Elementor e i Core Web Vitals.
L'alternativa che spesso è migliore
Al posto di un mega menu: un menu principale snello con cinque-sette voci e dietro pagine panoramica costruite bene, che portano in profondità.
Di solito è la soluzione migliore — per chi visita, perché l'orientamento è più chiaro, e per il motore di ricerca, perché una pagina panoramica con testo esplicativo può posizionarsi, un menu no.
Se non è sicuro di quale struttura si adatti al suo sito, è una delle domande che chiariamo presto nel mio corso Elementor — prima che investa tempo in una navigazione che non risolve il problema vero.
Tag