Corriger l'affichage du menu déroulant multi-niveaux dans PrestaShop

Comprendre la hiérarchie des menus Bootstrap

Avant de plonger dans le correctif, il faut comprendre comment Bootstrap (utilisé par la plupart des thèmes PrestaShop) gère les menus déroulants :

• **`dropdown`** : classe attribuée à un élément de navigation de premier niveau qui possède un sous-menu. Elle déclenche un menu déroulant vertical classique.
• **`dropdown-submenu`** : classe attribuée à un élément **à l'intérieur** d'un dropdown existant. Elle provoque l'ouverture d'un panneau latéral (flyout) à droite ou à gauche.

La confusion entre ces deux classes est la source du bug. Si une catégorie de niveau 2 reçoit dropdown-submenu au lieu de dropdown, elle sera traitée visuellement comme un sous-sous-menu alors qu'elle devrait ouvrir le premier panneau déroulant.

La cause racine dans le code PHP

Dans les modules de menu PrestaShop (qu'il s'agisse du blocktopmenu natif, de blockcategories, ou de modules de thème comme Leo Top Menu), la génération du HTML repose sur la propriété level_depth de l'objet Category.

Voici le type de code problématique que l'on rencontre fréquemment :

// Code d'origine — PROBLÉMATIQUE
elseif ($category->level_depth > 1 && count($children)) {
    $this->_menu .= 'dropdown-submenu">';
}

Ce code applique dropdown-submenu à toutes les catégories dont la profondeur dépasse 1, sans distinction. Or, dans PrestaShop :

Le niveau 2 nécessite dropdown pour déclencher le premier menu déroulant. Les niveaux 3 et au-delà nécessitent dropdown-submenu pour les panneaux latéraux imbriqués.

Le correctif

La solution consiste à différencier explicitement le traitement selon le level_depth :

// Code corrigé — Distinction par niveau de profondeur
elseif ($category->level_depth == 2 && count($children)) {
    // Niveau 2 : catégorie principale avec enfants → dropdown classique
    $this->_menu .= 'dropdown">';
}
elseif ($category->level_depth >= 3 && count($children)) {
    // Niveau 3+ : sous-catégorie avec enfants → sous-menu latéral
    $this->_menu .= 'dropdown-submenu">';
}

Points clés du correctif

1. **`level_depth == 2`** remplace `level_depth > 1` pour cibler uniquement les catégories principales.
2. **`level_depth >= 3`** (et non `== 3`) assure que les arborescences profondes (4, 5 niveaux…) restent correctement gérées.
3. La condition `count($children)` est conservée : si une catégorie n'a pas d'enfants, aucune classe dropdown n'est nécessaire.

Localiser le code à modifier

PrestaShop 1.6

Le code se trouve généralement dans :

• `/modules/blocktopmenu/blocktopmenu.php` (module natif)
• `/modules/blockcategories/blockcategories.php`
• Ou dans le module de menu de votre thème (ex : `blockleotopmenu`, `megamenu`, etc.)

Recherchez la méthode qui génère le HTML du menu, souvent nommée generateCategoriesMenu() ou similaire.

PrestaShop 1.7 et 8.x

Le menu natif a été refondu. Le module ps_mainmenu utilise désormais des templates Smarty et une logique de rendu différente. Si vous utilisez le thème Classic :

# Localiser les fichiers de template du menu
find themes/votre-theme/modules/ps_mainmenu -name "*.tpl"

Dans les versions modernes, le correctif s'applique plutôt côté template :

{* Template Smarty — Correction du niveau de dropdown *}
{if $node.depth == 2 && $node.children|count > 0}
    <li class="dropdown">
{elseif $node.depth >= 3 && $node.children|count > 0}
    <li class="dropdown-submenu">
{else}
    <li>
{/if}

Bonnes pratiques pour les menus multi-niveaux

1. Limiter la profondeur d'arborescence

Au-delà de 3 niveaux de menu, l'ergonomie se dégrade fortement sur desktop et devient inutilisable sur mobile. Privilégiez une navigation à 2 niveaux maximum avec des pages de catégories bien structurées.

2. Tester sur mobile

Les classes dropdown-submenu fonctionnent avec des événements :hover qui n'existent pas sur tactile. Vérifiez que votre thème gère correctement le click / touch pour les sous-menus.

3. Surcharger plutôt que modifier le core

Si vous modifiez un module natif, créez une surcharge (override) plutôt que d'éditer directement le fichier. Cela protège votre correctif lors des mises à jour :

// /override/modules/blocktopmenu/blocktopmenu.php
class BlockTopMenuOverride extends BlockTopMenu
{
    // Surcharger la méthode concernée
}

En PrestaShop 8.x, préférez l'approche par décorateur de service Symfony si le module le supporte.

4. Vider le cache après modification

Après toute modification du menu :

# Vider le cache PrestaShop
rm -rf var/cache/prod/* var/cache/dev/*

Ou depuis le back-office : Paramètres avancés → Performances → Vider le cache.

Diagnostic rapide

Si votre menu ne s'affiche toujours pas correctement après le correctif, inspectez le HTML généré avec les outils développeur de votre navigateur (F12) :

1. Vérifiez les classes sur chaque `
2. ` : `dropdown` pour le niveau 2, `dropdown-submenu` pour le niveau 3+.
3. Contrôlez que le `
   ` enfant possède bien la classe `dropdown-menu`.
   • Assurez-vous que le JavaScript Bootstrap est chargé (recherchez `dropdown.js` ou `bootstrap.min.js` dans les sources).
   • Vérifiez qu'aucun conflit CSS ne masque les sous-menus (`overflow: hidden` sur un parent est un piège fréquent).