Garder les sous-menus ouverts dans un menu de barre latérale

Un module de menu peut être utilisé aussi bien pour afficher un menu horizontal (généralement en haut de la page) qu'un menu vertical (généralement dans une barre latérale, à gauche ou à droite). Dans un menu horizontal (en haut), il n'est pas souhaitable de garder le sous-menu ouvert. C'est pourquoi le comportement par défaut d'un module de menu est de fermer les sous-menus au chargement de la page.

Comportement de bascule du statut « ouvert »

Cependant, dans un menu vertical (barre latérale), il est souvent souhaitable de laisser un sous-menu ouvert lorsqu'il contient le lien de menu actif. Dans Joomla 6.0, une nouvelle classe CSS nav-active-open a été introduite spécifiquement pour permettre de contrôler si les sous-menus s'ouvrent automatiquement au chargement de la page pour le lien de menu actif. La définition de cette classe permet désormais d'obtenir ce résultat. La classe peut être définie facilement dans le module via l'administration.

Comment créer un menu de barre latérale sans bascule déroulante

Si vous souhaitez garder tous les sous-menus ouverts, vous n'avez pas besoin de bascule déroulante. Pour y parvenir, vous devez créer ce que l'on appelle une surcharge de template. Voir l'article sur les surcharges de template.

Voici comment cette surcharge de template particulière est réalisée :

1. Commencez par sélectionner Système → Templates → Templates du site dans le menu de l'Administration, puis sélectionnez l'élément Cassiopeia Détails et fichiers. Cela ouvrira le formulaire Templates : Personnaliser (Cassiopeia).
   
   
2. Basculez vers l'onglet Créer des surcharges puis sélectionnez en cliquant sur mod_menu
   
   
   
   
3. Retournez à l'onglet éditeur et étendez les entrées sous HTML → mod_menu. Vous y trouverez l'entrée default.php. Ouvrez le fichier et commencez à modifier votre surcharge.
   
   
   
   
4. Pour afficher le menu sous forme de simple liste - sans la fonction de bascule et sans les boutons d'accessibilité associés - nous devons supprimer les lignes de code indiquées ici.
   
   
   
   
   Supprimer les lignes 15 - 20

   
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('mod_menu');
$wa->usePreset('mod_menu.menu');

   Supprimer les lignes 66-71

   // The next item is deeper - add toggle only here it is a heading or separator
if ($item->deeper && (int) $item->level === $startLevel && in_array($item->type, ['separator', 'heading'])) {
// Add a toggle button.
echo '<button class="mod-menu__toggle-sub" aria-expanded="false">';
}


   Supprimer les lignes 93 - 94

   echo '<span class="icon-chevron-down" aria-hidden="true">' .
'</span></button>';


   Remplacer les lignes 98 - 101 par `break`

   echo '<button class="mod-menu__toggle-sub" aria-expanded="false">' .
break;
'<span class="icon-chevron-down" aria-hidden="true"></span>' .
'<span class="visually-hidden">' . Text::sprintf('MOD_MENU_TOGGLE_SUBMENU_LABEL', $item->title) . '</span>' .
'</button>';


Résultat

Résultat, nous obtenons une liste simple, sans fonctionnalité de bascule pour notre module de menu.

Conseil de bonne pratique

Avant de commencer à créer des surcharges dans votre template, créez d'abord un template enfant. Ne modifiez pas le template original fourni avec Joomla!, car il pourrait être écrasé lors de la prochaine mise à jour. Les modifications apportées à votre template enfant seront conservées.