# Mega Menu & Burger — Guida completa > Panoramica Il modulo Mega Menu & Burger (datafireflymegamenu) sostituisce la navigazione del tuo negozio con un sistema completo e configurabile: mega menu a più colonne, menu a tendina walker ricorsivo… - Pagina: - Lingua: it - Aggiornato il: 2026-08-22 - Altre lingue: [fr](https://www.datafirefly.com/documentation/datafireflymegamenu/index.md), [en](https://www.datafirefly.com/en/documentation/datafireflymegamenu/index.md), [es](https://www.datafirefly.com/es/documentation/datafireflymegamenu/index.md), [de](https://www.datafirefly.com/de/documentation/datafireflymegamenu/index.md), [pl](https://www.datafirefly.com/pl/documentation/datafireflymegamenu/index.md), [pt](https://www.datafirefly.com/pt/documentation/datafireflymegamenu/index.md), [nl](https://www.datafirefly.com/nl/documentation/datafireflymegamenu/index.md) - Indice: ## Panoramica Il modulo **Mega Menu & Burger** (`datafireflymegamenu`) sostituisce la navigazione del tuo negozio con un sistema completo e configurabile: **mega menu** a più colonne, **menu a tendina walker** ricorsivo classico e **menu burger** fluido su mobile. Tutto si costruisce visivamente nel back office, con il trascinamento, senza toccare una riga di codice. Ogni menu può mostrare categorie, prodotti (con foto e prezzo), marche, pagine CMS, link personalizzati, blocchi HTML liberi o immagini promozionali, organizzati in colonne all'interno di pannelli mega. Il modulo è completamente multilingua e multinegozio, e l'elemento corrispondente alla pagina visitata viene evidenziato automaticamente. Un menu dimostrativo «Menu principale» viene creato automaticamente all'installazione sull'hook `displayNav2`, con un link Home e un albero di categorie. Puoi modificarlo o eliminarlo liberamente. ## Compatibilità - PrestaShop 8.0 a 9.x - PHP 7.4 a 8.x - Negozio singolo e multinegozio - 5 lingue incluse: FR, EN, ES, DE, IT (e traducibile senza limiti) - Tema Classic e temi personalizzati - Architettura PSR-4 senza dipendenza da Composer ## Installazione 1. Nel back office, apri **Moduli > Gestore moduli**. 2. Fai clic su **Carica un modulo** e seleziona il file `datafireflymegamenu.zip`. 3. Una volta installato, fai clic su **Configura**. All'installazione, il modulo crea le sue tabelle, registra i suoi hook di visualizzazione e di invalidazione della cache, aggiunge la sua scheda di amministrazione e genera il menu dimostrativo. Durante l'aggiornamento da una versione precedente, gli script di upgrade aggiungono le nuove colonne e svuotano automaticamente la cache di rendering. ## Primi passi 1. Apri la configurazione del modulo. A sinistra, l'elenco **I miei menu** e le **Impostazioni del menu**; a destra, la **Struttura del menu**. 2. Fai clic su **Nuovo menu**, dagli un nome (per lingua), scegli il suo **hook di visualizzazione** e il suo **layout**, poi salva. 3. Nell'area **Struttura del menu**, fai clic su **Aggiungi elemento radice** e scegli il suo tipo. 4. Trascina gli elementi per riordinarli o annidarli. Le posizioni vengono salvate automaticamente. ## Impostazioni del menu Il pannello **Impostazioni del menu** controlla il comportamento globale di un menu: - **Nome del menu**: etichetta interna, traducibile per lingua. - **Hook di visualizzazione**: posizione in cui il menu viene renderizzato (vedi la sezione Visualizzazione e hook). - **Layout**: _Mega menu_ (pannelli a colonne) o _Tendina classica_ (walker ricorsivo). - **Apertura**: i sottomenu si aprono al _passaggio del mouse_ o al _clic_. Al passaggio del mouse, un breve ritardo di grazia alla chiusura evita lo sfarfallio nei movimenti in diagonale. - **Breakpoint mobile (px)**: larghezza sotto la quale il menu passa alla modalità mobile/burger (991 px di default). - **Larghezza massima (px)**: centra la barra sulla larghezza scelta per allinearla al contenitore del tema (es. 1140 px). `0` = tutta larghezza. - **Barra fissa (sticky)**: il menu resta fissato in alto durante lo scorrimento. - **Pannelli mega a tutta larghezza**: i pannelli mega si estendono su tutta la larghezza della barra. - **Menu burger su mobile**: attiva il menu burger sotto il breakpoint. - **Titoli di colonna richiudibili**: trasforma i titoli di colonna dei pannelli mega in fisarmoniche chiuse per impostazione predefinita, su mobile, su desktop o su entrambi (vedi la sezione dedicata). - **Attivato**: mostra o nasconde il menu sul front office. - **Negozi** (multinegozio): seleziona i negozi in cui il menu viene mostrato. ## Costruire l'albero (trascinamento) La struttura di un menu si costruisce nell'area **Struttura del menu**. Ogni riga rappresenta un elemento, con una maniglia di trascinamento, una pillola che ne indica il tipo e pulsanti di azione. - **Riordinare**: afferra la maniglia e sposta l'elemento verticalmente. - **Annidare**: rilascia un elemento dentro un altro per renderlo un sottoelemento (annidamento illimitato). - **Aggiungi sottoelemento**: pulsante dedicato su ogni riga. - **Modifica** / **Elimina**: icone su ogni riga. L'eliminazione di un elemento elimina anche i suoi sottoelementi. Posizioni e annidamenti vengono salvati automaticamente a ogni spostamento, senza ricaricare la pagina. ## Tipi di elementi Ogni elemento ha un **tipo** che ne determina il contenuto e il link. La finestra di modifica adatta automaticamente i campi disponibili al tipo scelto: - **Link personalizzato**: un URL libero, traducibile per lingua. - **Categoria**: link a una categoria del negozio, con immagine e contatore prodotti opzionali. - **Albero categorie (auto)**: genera automaticamente le sottocategorie (vedi sezione dedicata). - **Prodotto**: link a una scheda prodotto, con foto di copertina e prezzo opzionali. - **Marca**: link a una marca; **Tutte le marche**: link alla pagina delle marche. - **Fornitore**: link a un fornitore. - **Pagina CMS** e **Categoria CMS**: link ai tuoi contenuti editoriali. - **Blocco HTML / CMS**: contenuto HTML libero, ideale per una promo o un testo arricchito. - **Immagine / promo**: un'immagine cliccabile (con URL). - **Etichetta**: un semplice titolo non cliccabile, utile come intestazione di colonna. - **Separatore**: una linea di separazione — orizzontale nei pannelli a tendina e mega, verticale tra gli elementi della barra. Per ogni elemento puoi anche definire: un'**etichetta**, un **badge** colorato (testo + colore), un'**icona** Material, una **classe CSS** personalizzata, l'apertura **in una nuova scheda** e la **visibilità per dispositivo** (mobile, tablet, desktop). ## Opzioni di visualizzazione: immagini, prezzi e contatori A seconda del tipo scelto, la finestra di modifica offre un blocco **Opzioni di visualizzazione**: - **Mostra l'immagine** (categoria, albero, prodotto): mostra l'immagine della categoria o la foto di copertina del prodotto in miniatura nel menu. Deselezionala per un menu 100 % testo. Un'immagine caricata manualmente sull'elemento ha sempre la priorità. - **Mostra il prezzo** (prodotto): mostra il prezzo del prodotto, formattato secondo la valuta e la lingua del visitatore, a destra dell'etichetta. - **Mostra il contatore prodotti** (categoria, albero): mostra in una pillola il numero di prodotti attivi della categoria, sottocategorie incluse. - **Aggiungi un link «Vedi tutto»** (albero): aggiunge alla fine dell'elenco un link alla categoria radice dell'albero. Combina un elemento **Prodotto** con immagine + prezzo in una colonna di pannello mega per mettere in risalto una novità o una promozione direttamente nella navigazione. ## Mega menu: colonne, immagini e blocchi HTML Per trasformare un sottomenu in pannello mega, apri l'elemento padre e imposta **Visualizzazione del sottomenu** su _Mega panel (colonne)_. Definisci poi il **numero di colonne**. Ogni figlio diretto del padre diventa allora una **colonna** del pannello. Puoi regolare la larghezza di ogni colonna tramite il suo campo **Larghezza colonna (span)**, e inserirvi sottolink, un **blocco HTML** o un'**immagine promozionale**. Mescola i tipi in uno stesso pannello mega: alcune colonne di categorie, una colonna «Blocco HTML» per una promo e una colonna «Immagine» per mettere in risalto una novità. ## Titoli di colonna richiudibili Su un catalogo profondo, un pannello mega può diventare molto lungo, soprattutto su mobile dove tutte le colonne si impilano una sotto l'altra. L'opzione **Titoli di colonna richiudibili**, nelle Impostazioni del menu, trasforma ogni titolo di colonna in una fisarmonica chiusa per impostazione predefinita. Il visitatore vede allora solo l'elenco dei titoli di colonna, di solito le tue sottocategorie principali, e apre unicamente la sezione che gli interessa. Un chevron indica lo stato aperto o chiuso, e un clic sul titolo apre o chiude il suo elenco invece di seguire il link. Sono disponibili quattro valori: - **Disattivato**: comportamento storico, le colonne sono sempre aperte. - **Solo mobile**: fisarmoniche sotto il breakpoint, colonne aperte su desktop. - **Solo desktop**: fisarmoniche sopra il breakpoint, colonne aperte su mobile. - **Mobile e desktop**: fisarmoniche in entrambe le modalità. Solo le colonne che hanno sottoelementi diventano fisarmoniche. Le colonne di tipo blocco HTML, immagine promozionale o etichetta semplice non sono interessate. La modalità viene ricalcolata al ridimensionamento della finestra, senza ricaricare la pagina. La fisarmonica è accessibile da tastiera: il titolo riceve il focus e i tasti Invio o Spazio la aprono o la chiudono, con l'attributo `aria-expanded` tenuto aggiornato. ## Albero categorie automatico Il tipo **Albero categorie (auto)** evita qualsiasi inserimento manuale: genera da solo le sue sottocategorie a partire da una categoria radice, fino al livello definito dal campo **Sottolivelli**. Le sue **Opzioni di visualizzazione** permettono di attivare o meno le **immagini delle categorie** (miniature), il **contatore prodotti** per categoria e un link **«Vedi tutto»** che punta alla categoria radice, aggiunto alla fine dell'elenco. Associa questo tipo a una visualizzazione _Mega panel_ per ottenere, in pochi secondi, un mega menu «Negozio» completo e sempre sincronizzato con il tuo catalogo. L'albero generato segue le categorie attive e il loro ordine in PrestaShop. Qualsiasi modifica di categoria viene riflessa automaticamente (vedi Prestazioni e cache). ## Multilingua e multinegozio L'**etichetta**, l'**URL personalizzato**, il **badge** e il **contenuto HTML** di ogni elemento sono traducibili tramite le schede di lingua della finestra di modifica. Anche il nome del menu è multilingua. In multinegozio, ogni menu viene associato a uno o più negozi dalle sue impostazioni. Uno stesso menu può quindi essere mostrato solo su alcuni negozi. ## Visualizzazione, hook e posizione Un menu viene mostrato tramite l'**hook** scelto nelle sue impostazioni. Gli hook supportati sono: - `displayNav2` — barra di navigazione principale (default) - `displayTop` — parte superiore della pagina, accanto al logo e alla barra di ricerca - `displayNavFullWidth` — banda a tutta larghezza - `displayFooter` — piè di pagina - `displayLeftColumn` e `displayRightColumn` — colonne laterali Su `displayTop`, la barra si adatta automaticamente alla larghezza del suo contenuto per convivere con il logo e la barra di ricerca del tema sulla stessa riga; i pannelli mega a tutta larghezza vi vengono centrati sullo schermo. Per una posizione su misura, puoi anche innestare il modulo su un altro hook dalla pagina **Posizioni** di PrestaShop, poi selezionare quell'hook nelle impostazioni del menu. ## Pagina attiva e navigazione L'elemento di menu corrispondente alla pagina visitata — e il suo elemento radice — ricevono automaticamente la classe `is-active` e vengono evidenziati secondo lo stile hover del menu. Il rilevamento avviene nel browser (corrispondenza esatta dell'URL, poi migliore corrispondenza di sezione), il che resta perfettamente compatibile con la cache di rendering. ## Modalità mobile e menu burger Sotto il **breakpoint** definito, il menu passa automaticamente alla modalità mobile. Se l'opzione **Menu burger su mobile** è attiva, la navigazione assume la forma di un menu burger: pannello scorrevole (slide-in), sottomenu a fisarmonica, sfondo oscurato (backdrop) e blocco dello scorrimento della pagina. Il modulo rispetta la preferenza di sistema _movimento ridotto_ (`prefers-reduced-motion`) disattivando le animazioni per gli utenti interessati. ## Prestazioni e cache Il rendering di ogni menu è **messo in cache** da Smarty, con una chiave che tiene conto del menu, della lingua, del negozio, della valuta e del gruppo cliente. I menu vengono così mostrati senza ricalcolo a ogni pagina. La cache viene **invalidata automaticamente** quando una categoria, una pagina CMS o una marca viene aggiunta, modificata o eliminata, così come a ogni salvataggio di un menu o di un elemento nel back office. Alberi automatici, contatori prodotti e prezzi restano quindi sincronizzati con il tuo catalogo. Dopo un intervento manuale (cambio di tema, svuotamento parziale), svuota la cache di PrestaShop da **Parametri avanzati > Prestazioni** per forzare un nuovo rendering. ## FAQ e risoluzione dei problemi ### Il menu non appare sul front office Verifica che il menu sia **attivato**, che sia associato al **negozio giusto** e che il suo **hook** corrisponda a una posizione realmente mostrata dal tuo tema. Poi svuota la cache di PrestaShop e ricarica in navigazione privata. ### L'hook scelto non appare nel mio tema Non tutti i temi implementano tutti gli hook. Scegli un hook realmente presente nel tuo tema (spesso `displayNav2` o `displayTop`), oppure innesta il modulo su un hook personalizzato tramite la pagina Posizioni. ### Il mio mega menu non mostra colonne Apri l'elemento padre e imposta **Visualizzazione del sottomenu** su _Mega panel (colonne)_, definisci il numero di colonne e verifica che esistano elementi figli: ogni figlio diretto diventa una colonna. ### Le immagini di categorie o prodotti non vengono mostrate Verifica che la casella **Mostra l'immagine** sia selezionata nelle Opzioni di visualizzazione dell'elemento, che la categoria abbia davvero un'immagine (o il prodotto una foto di copertina), poi svuota la cache. Per un menu senza immagini, deseleziona semplicemente questa opzione. ### Il menu va a capo o sposta la barra di ricerca (displayTop) Dalla versione 1.2.1, la barra si adatta al suo contenuto su `displayTop`. Se il problema persiste dopo l'aggiornamento, svuota la cache di PrestaShop: l'HTML in cache deve essere rigenerato con le nuove classi. ### Il mio mega menu è troppo lungo su mobile Attiva l'opzione **Titoli di colonna richiudibili** nelle Impostazioni del menu, in modalità _Solo mobile_ o _Mobile e desktop_. I titoli di colonna diventano fisarmoniche chiuse per impostazione predefinita: il pannello si riduce a un breve elenco di sezioni che il visitatore apre quando serve. Poi svuota la cache di PrestaShop per rigenerare l'HTML memorizzato. ### Le modifiche non appaiono immediatamente Poiché il rendering è in cache, svuota la cache di PrestaShop dopo una modifica manuale. Le modifiche di categorie, pagine CMS, marche, menu ed elementi invalidano la cache automaticamente. ### È compatibile con PrestaShop 9? Sì. Il modulo è compatibile con PrestaShop 8 e 9, in multinegozio e multilingua, e gestisce in modo nativo le differenze tecniche tra le due versioni. I prezzi mostrati nel menu utilizzano il formattatore di locale di PrestaShop 9 con ripiego automatico su PrestaShop 8.