Mega Menu
Trasforma qualsiasi voce di menu di primo livello in un pannello a larghezza intera con fino a 4 colonne — combina link, intestazioni, immagini, shortcode e altro ancora senza scrivere alcun codice.
Cos'è un mega menu?
Un mega menu è un pannello a dropdown di grandi dimensioni che si apre al passaggio del mouse (o al tocco su mobile) su una voce di menu di primo livello. A differenza di un dropdown standard — che mostra una singola colonna di link — un mega menu può contenere più colonne con contenuti eterogenei: link di navigazione, intestazioni di sezione, immagini promozionali, form di ricerca, shortcode e qualsiasi altro elemento HTML supportato da WordPress.
Attivare il mega menu su una voce di primo livello
- Vai su Menu Builder → Voci.
- Fai clic sulla voce di primo livello su cui vuoi abilitare il mega menu.
- Nel pannello delle impostazioni della voce, attiva l'interruttore Mega menu.
- Fai clic su Modifica mega menu per aprire l'editor del pannello.
- Aggiungi colonne e contenuti (vedi sezioni seguenti), quindi salva.
Il mega menu è disponibile solo per le voci di primo livello. Le voci nidificate all'interno di un mega menu non possono avere a loro volta un mega menu. Il numero massimo di colonne per pannello è 4.
Aggiungere e organizzare le colonne
Nell'editor del mega menu puoi gestire le colonne con le seguenti azioni:
- Aggiungi colonna — aggiunge una nuova colonna vuota al pannello.
- Duplica — crea una copia esatta di una colonna esistente.
- Riordina — trascina le colonne per cambiarne l'ordine.
- Imposta larghezza — assegna una larghezza percentuale a ciascuna colonna (la somma deve essere 100%).
- Imposta allineamento — allinea il contenuto della colonna a sinistra, al centro o a destra.
- Elimina — rimuove la colonna e tutto il suo contenuto.
Tipi di contenuto delle colonne
All'interno di ciascuna colonna puoi aggiungere elementi di tipo diverso:
| Tipo | Descrizione |
|---|---|
| Link | Una voce di menu cliccabile con URL, etichetta e opzione di apertura in nuova scheda. |
| Intestazione | Un'intestazione di sezione non cliccabile per raggruppare i link sottostanti. |
| Divisore | Una linea orizzontale per separare visivamente i gruppi di contenuto. |
| Immagine | Un'immagine dalla Libreria Media, opzionalmente con link e testo alternativo. |
| Shortcode | Qualsiasi shortcode WordPress valido — form di contatto, prodotti WooCommerce, ecc. |
Aspetto del pannello
Per ciascuna voce di tipo Link all'interno del mega menu puoi personalizzare l'aspetto individualmente:
| Opzione | Descrizione |
|---|---|
| Sfondo | Colore di sfondo del pannello mega menu. |
| Larghezza massima del pannello | Limita la larghezza del pannello (predefinito: larghezza del contenuto del sito). |
| Padding | Spaziatura interna del pannello (top, bottom, sinistra, destra). |
| Gap tra colonne | Spazio orizzontale tra le colonne. |
| Border radius | Arrotondamento degli angoli del pannello. |
| Dimensione font | Dimensione del testo delle voci all'interno del pannello. |
| Colori | Colore dei link, colore hover, colore delle intestazioni. |
| Stile divisore | Colore, spessore e stile (solido, tratteggiato) delle linee divisorie. |
| Velocità animazione | Durata dell'animazione di apertura/chiusura del pannello in millisecondi. |
Preset
Menu Builder include 20 template di mega menu predefiniti, organizzati per settore, che puoi applicare con un clic come punto di partenza per il tuo pannello.
I preset coprono categorie come e-commerce, servizi, agenzia, ristorazione, tecnologia e altri verticali comuni. Ogni preset è completamente modificabile dopo l'applicazione.
Per accedere ai preset, fai clic su Carica preset nell'editor del mega menu, scegli il template che preferisci e confermane l'applicazione. Il contenuto del pannello verrà sostituito con quello del preset selezionato.
Comportamento su mobile
Il mega menu dispone di due modalità di visualizzazione sui dispositivi mobili, configurabili per ogni singola voce:
- Visibile su mobile — il pannello viene mostrato su mobile come accordion espandibile. Le colonne vengono impilate verticalmente.
- Nascosto su mobile — il mega menu non viene mostrato su mobile; la voce si comporta come un link semplice o un dropdown standard.
Impostazioni globali
Alcune opzioni del mega menu si applicano a tutti i pannelli del sito e si configurano in Menu Builder → Layout → Mega menu:
| Opzione | Descrizione |
|---|---|
| Ritardo hover | Millisecondi di attesa prima che il pannello si apra al passaggio del mouse. |
| Chiudi al clic esterno | Chiude il pannello quando l'utente fa clic fuori da esso. |
Il ritardo hover "indulgente" impedisce la chiusura accidentale del pannello quando il mouse percorre una traiettoria diagonale verso i sottoelementi — una tecnica ispirata al classico algoritmo del "triangolo del menu a discesa".