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 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.

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.

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.
• 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.

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.

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.

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.

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.

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.

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.

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.