# Mega Menu & Burger — Guide complet > Présentation Le module Mega Menu & Burger (datafireflymegamenu) remplace la navigation de votre boutique par un système complet et configurable : méga-menu multi-colonnes, menu déroulant walker récursif classique et menu… - Page: - Langue: fr - Mis à jour le: 2026-08-22 - Autres langues: [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), [it](https://www.datafirefly.com/it/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) - Index: ## Présentation Le module **Mega Menu & Burger** (`datafireflymegamenu`) remplace la navigation de votre boutique par un système complet et configurable : **méga-menu** multi-colonnes, **menu déroulant walker** récursif classique et **menu burger** fluide sur mobile. Tout se construit visuellement en back-office, au glisser-déposer, sans toucher une ligne de code. Chaque menu peut afficher des catégories, des produits (avec photo et prix), des marques, des pages CMS, des liens personnalisés, des blocs HTML libres ou des images promotionnelles, organisés en colonnes dans des panneaux méga. Le module est entièrement multilingue et multiboutique, et l'élément correspondant à la page visitée est surligné automatiquement. Un menu de démonstration « Menu principal » est créé automatiquement à l'installation sur le hook `displayNav2`, avec un lien Accueil et une arborescence de catégories. Vous pouvez le modifier ou le supprimer librement. ## Compatibilité - PrestaShop 8.0 à 9.x - PHP 7.4 à 8.x - Mono-boutique et multiboutique - 5 langues fournies : FR, EN, ES, DE, IT (et traduisible à l'infini) - Thème Classic et thèmes personnalisés - Architecture PSR-4 sans dépendance Composer ## Installation 1. Dans le back-office, ouvrez **Modules > Gestionnaire de modules**. 2. Cliquez sur **Installer un module** puis sélectionnez le fichier `datafireflymegamenu.zip`. 3. Une fois installé, cliquez sur **Configurer**. À l'installation, le module crée ses tables, enregistre ses hooks d'affichage et d'invalidation de cache, ajoute son onglet d'administration et génère le menu de démonstration. Lors d'une mise à jour depuis une version antérieure, les scripts d'upgrade ajoutent les nouvelles colonnes et purgent le cache de rendu automatiquement. ## Prise en main rapide 1. Ouvrez la configuration du module. À gauche, la liste **Mes menus** et les **Réglages du menu** ; à droite, la **Structure du menu**. 2. Cliquez sur **Nouveau menu**, donnez-lui un nom (par langue), choisissez son **hook d'affichage** et son **layout**, puis enregistrez. 3. Dans la zone **Structure du menu**, cliquez sur **Ajouter un élément racine** et choisissez son type. 4. Glissez-déposez les éléments pour les réordonner ou les imbriquer. Les positions sont sauvegardées automatiquement. ## Réglages du menu Le panneau **Réglages du menu** contrôle le comportement global d'un menu : - **Nom du menu** : libellé interne, traduisible par langue. - **Hook d'affichage** : emplacement où le menu est rendu (voir la section Affichage et hooks). - **Layout** : _Méga-menu_ (panneaux à colonnes) ou _Menu déroulant classique_ (walker récursif). - **Déclenchement** : ouverture des sous-menus au _survol_ ou au _clic_. Au survol, un court délai de grâce à la fermeture évite tout scintillement lors des déplacements en diagonale. - **Point de rupture mobile (px)** : largeur en dessous de laquelle le menu bascule en mode mobile/burger (991 px par défaut). - **Largeur maximale (px)** : centre la barre sur la largeur choisie pour l'aligner sur le conteneur du thème (ex. 1140 px). `0` = pleine largeur. - **Barre collante (sticky)** : le menu reste fixé en haut lors du défilement. - **Panneaux méga pleine largeur** : les panneaux méga s'étendent sur toute la largeur de la barre. - **Menu burger sur mobile** : active le menu burger en dessous du point de rupture. - **Titres de colonnes repliables** : transforme les titres de colonnes des panneaux méga en accordéons fermés par défaut, sur mobile, sur PC ou sur les deux (voir la section dédiée). - **Activé** : affiche ou masque le menu sur le front. - **Boutiques** (multiboutique) : sélectionne les boutiques sur lesquelles le menu est diffusé. ## Construire l'arborescence (glisser-déposer) La structure d'un menu se construit dans la zone **Structure du menu**. Chaque ligne représente un élément, avec une poignée de déplacement, une pastille indiquant son type et des boutons d'action. - **Réordonner** : saisissez la poignée et déplacez l'élément verticalement. - **Imbriquer** : déposez un élément à l'intérieur d'un autre pour en faire un sous-élément (imbrication illimitée). - **Ajouter un sous-élément** : bouton dédié sur chaque ligne. - **Modifier** / **Supprimer** : icônes sur chaque ligne. La suppression d'un élément supprime aussi ses sous-éléments. Les positions et imbrications sont enregistrées automatiquement à chaque déplacement, sans rechargement de page. ## Types d'éléments Chaque élément possède un **type** qui détermine son contenu et son lien. La fenêtre d'édition adapte automatiquement les champs disponibles selon le type choisi : - **Lien personnalisé** : une URL libre, traduisible par langue. - **Catégorie** : lien vers une catégorie de la boutique, avec image et compteur de produits en option. - **Arborescence de catégories (auto)** : génère automatiquement les sous-catégories (voir section dédiée). - **Produit** : lien vers une fiche produit, avec photo de couverture et prix en option. - **Marque** : lien vers une marque ; **Toutes les marques** : lien vers la page des marques. - **Fournisseur** : lien vers un fournisseur. - **Page CMS** et **Catégorie CMS** : liens vers vos contenus éditoriaux. - **Bloc HTML / CMS** : contenu HTML libre, idéal pour une promo ou un texte enrichi. - **Image / promo** : une image cliquable (avec URL). - **Libellé** : un simple titre non cliquable, utile comme en-tête de colonne. - **Séparateur** : un trait de séparation — horizontal dans les panneaux déroulants et méga, vertical entre les éléments de la barre. Pour chaque élément, vous pouvez aussi définir : un **libellé**, un **badge** coloré (texte + couleur), une **icône** Material, une **classe CSS** personnalisée, l'ouverture **dans un nouvel onglet**, et la **visibilité par appareil** (mobile, tablette, desktop). ## Options d'affichage : images, prix et compteurs Selon le type choisi, la fenêtre d'édition propose un bloc **Options d'affichage** : - **Afficher l'image** (catégorie, arborescence, produit) : affiche l'image de la catégorie ou la photo de couverture du produit en vignette dans le menu. Décochez pour un menu 100 % texte. Une image téléversée manuellement sur l'élément reste toujours prioritaire. - **Afficher le prix** (produit) : affiche le prix du produit, formaté selon la devise et la langue du visiteur, à droite du libellé. - **Afficher le compteur de produits** (catégorie, arborescence) : affiche en pastille le nombre de produits actifs de la catégorie, sous-catégories comprises. - **Ajouter un lien « Voir tout »** (arborescence) : ajoute en fin de liste un lien vers la catégorie racine de l'arborescence. Combinez un élément **Produit** avec image + prix dans une colonne de panneau méga pour mettre en avant une nouveauté ou une promotion directement dans la navigation. ## Méga-menu : colonnes, images et blocs HTML Pour transformer un sous-menu en panneau méga, ouvrez l'élément parent et réglez **Affichage du sous-menu** sur _Mega panel (colonnes)_. Définissez ensuite le **nombre de colonnes**. Chaque enfant direct du parent devient alors une **colonne** du panneau. Vous pouvez ajuster la largeur de chaque colonne via son champ **Largeur de colonne (span)**, et y déposer des sous-liens, un **bloc HTML** ou une **image promotionnelle**. Mélangez les types dans un même panneau méga : quelques colonnes de catégories, une colonne « Bloc HTML » pour une promo et une colonne « Image » pour mettre en avant une nouveauté. ## Titres de colonnes repliables Sur un catalogue profond, un panneau méga peut devenir très long, en particulier sur mobile où toutes les colonnes s'empilent les unes sous les autres. L'option **Titres de colonnes repliables**, dans les Réglages du menu, transforme chaque titre de colonne en accordéon fermé par défaut. Le visiteur ne voit alors que la liste des titres de colonnes, en général vos sous-catégories principales, et déplie uniquement la rubrique qui l'intéresse. Un chevron indique l'état ouvert ou fermé, et un clic sur le titre déplie ou replie sa liste au lieu de suivre le lien. Quatre valeurs sont disponibles : - **Désactivé** : comportement historique, les colonnes sont toujours dépliées. - **Mobile uniquement** : accordéons en dessous du point de rupture, colonnes dépliées sur PC. - **PC uniquement** : accordéons au-dessus du point de rupture, colonnes dépliées sur mobile. - **Mobile et PC** : accordéons dans les deux modes. Seules les colonnes qui possèdent des sous-éléments deviennent des accordéons. Les colonnes de type bloc HTML, image promotionnelle ou libellé simple ne sont pas affectées. Le mode est recalculé au redimensionnement de la fenêtre, sans rechargement de page. L'accordéon est accessible au clavier : le titre reçoit le focus et les touches Entrée ou Espace le déplient ou le replient, avec l'attribut `aria-expanded` tenu à jour. ## Arborescence de catégories automatique Le type **Arborescence de catégories (auto)** évite toute saisie manuelle : il génère seul ses sous-catégories à partir d'une catégorie racine, jusqu'au niveau défini par le champ **Sous-niveaux**. Ses **Options d'affichage** permettent d'activer ou non les **images de catégories** (vignettes), le **compteur de produits** par catégorie et un lien **« Voir tout »** pointant vers la catégorie racine, ajouté en fin de liste. Associez ce type à un affichage _Mega panel_ pour obtenir, en quelques secondes, un méga-menu « Boutique » complet et toujours à jour avec votre catalogue. L'arborescence générée suit les catégories actives et leur ordre dans PrestaShop. Toute modification de catégorie est répercutée automatiquement (voir Performance et cache). ## Multilingue et multiboutique Le **libellé**, l'**URL personnalisée**, le **badge** et le **contenu HTML** de chaque élément sont traduisibles via les onglets de langue de la fenêtre d'édition. Le nom du menu est lui aussi multilingue. En multiboutique, chaque menu est associé à une ou plusieurs boutiques depuis ses réglages. Un même menu peut donc être diffusé sur certaines boutiques seulement. ## Affichage, hooks et position Un menu s'affiche via le **hook** choisi dans ses réglages. Les hooks pris en charge sont : - `displayNav2` — barre de navigation principale (par défaut) - `displayTop` — haut de page, à côté du logo et de la barre de recherche - `displayNavFullWidth` — bandeau pleine largeur - `displayFooter` — pied de page - `displayLeftColumn` et `displayRightColumn` — colonnes latérales Sur `displayTop`, la barre s'adapte automatiquement à la largeur de son contenu pour cohabiter avec le logo et la barre de recherche du thème sur la même ligne ; les panneaux méga pleine largeur y sont centrés sur l'écran. Pour un emplacement sur mesure, vous pouvez aussi greffer le module sur un autre hook depuis la page **Positions** de PrestaShop, puis sélectionner ce hook dans les réglages du menu. ## Page active et navigation L'élément de menu correspondant à la page visitée — et son élément racine — reçoivent automatiquement la classe `is-active` et sont surlignés selon le style de survol du menu. La détection se fait côté navigateur (correspondance exacte de l'URL, puis meilleure correspondance de section), ce qui reste parfaitement compatible avec la mise en cache du rendu. ## Mode mobile et menu burger En dessous du **point de rupture** défini, le menu bascule automatiquement en mode mobile. Si l'option **Menu burger sur mobile** est active, la navigation prend la forme d'un menu burger : panneau coulissant (slide-in), sous-menus en accordéon, fond assombri (backdrop) et verrouillage du défilement de la page. Le module respecte la préférence système _mouvement réduit_ (`prefers-reduced-motion`) en désactivant les animations pour les utilisateurs concernés. ## Performance et cache Le rendu de chaque menu est **mis en cache** par Smarty, avec une clé qui tient compte du menu, de la langue, de la boutique, de la devise et du groupe client. Les menus s'affichent ainsi sans recalcul à chaque page. Le cache est **invalidé automatiquement** lorsqu'une catégorie, une page CMS ou une marque est ajoutée, modifiée ou supprimée, ainsi qu'à chaque enregistrement d'un menu ou d'un élément en back-office. Les arborescences automatiques, compteurs de produits et prix restent donc synchronisés avec votre catalogue. Après une intervention manuelle (changement de thème, vidage partiel), videz le cache de PrestaShop depuis **Paramètres avancés > Performances** pour forcer un nouveau rendu. ## FAQ et dépannage ### Le menu ne s'affiche pas sur le front Vérifiez que le menu est **activé**, qu'il est associé à la **bonne boutique**, et que son **hook** correspond à un emplacement réellement affiché par votre thème. Videz ensuite le cache de PrestaShop et rechargez en navigation privée. ### Le hook choisi n'apparaît pas dans mon thème Tous les thèmes n'implémentent pas tous les hooks. Choisissez un hook réellement présent dans votre thème (souvent `displayNav2` ou `displayTop`), ou greffez le module sur un hook personnalisé via la page Positions. ### Mon méga-menu n'affiche pas de colonnes Ouvrez l'élément parent et réglez **Affichage du sous-menu** sur _Mega panel (colonnes)_, définissez le nombre de colonnes, puis vérifiez que des éléments enfants existent : chaque enfant direct devient une colonne. ### Les images de catégories ou de produits ne s'affichent pas Vérifiez que la case **Afficher l'image** est cochée dans les Options d'affichage de l'élément, que la catégorie possède bien une image (ou le produit une photo de couverture), puis videz le cache. Pour un menu sans images, décochez simplement cette option. ### Le menu passe à la ligne ou décale la barre de recherche (displayTop) Depuis la version 1.2.1, la barre s'adapte à son contenu sur `displayTop`. Si le problème persiste après mise à jour, videz le cache de PrestaShop : le HTML mis en cache doit être régénéré avec les nouvelles classes. ### Mon méga-menu est trop long sur mobile Activez l'option **Titres de colonnes repliables** dans les Réglages du menu, en mode _Mobile uniquement_ ou _Mobile et PC_. Les titres de colonnes deviennent des accordéons fermés par défaut : le panneau se réduit à une liste courte de rubriques que le visiteur déplie à la demande. Videz ensuite le cache de PrestaShop pour régénérer le HTML mis en cache. ### Les modifications n'apparaissent pas immédiatement Le rendu étant mis en cache, videz le cache de PrestaShop après une modification manuelle. Les changements de catégories, pages CMS, marques, menus et éléments invalident le cache automatiquement. ### Est-ce compatible PrestaShop 9 ? Oui. Le module est compatible PrestaShop 8 et 9, en multiboutique et multilingue, et gère nativement les différences techniques entre les deux versions. Les prix affichés dans le menu utilisent le formateur de locale de PrestaShop 9 avec repli automatique sur PrestaShop 8.