Les menus imbriqués dans Contao
Source
Ce tutoriel est basé sur la discussion Sous-menu pubiée dans le forum de Contao.fr. Merci aux intervenants de cette discussion pour leurs solutions techniques.
Créer des menus hiérarchiques dans des modules de navigation
Objectif
Nous allons apprendre à utiliser des menus hiérarchiques et à afficher les niveaux imbriqués dans un autre module de navigation.
La structure initiale du site
Je suis parti de l'installation initiale de Contao, avec le thème Music Academy, dans laquelle j'ai modifié un peu la structure des pages et l'affichage des modules.
Structure des pages
Pour afficher la structure des pages, cliquez sur Présentation - Structure de site.
Nous avons bien des pages « imbriquées » dans :
- L'académie, avec les pages Dernières actualités, Photos du campus et Calendrier
- Cours, avec les pages Piano et Violon
Les modules
Pour afficher la structure des pages, cliquez sur Présentation - Thèmes.
Dans la liste des thèmes, dans la ligne du thème par défaut Contao Open Source CMS, cliquez sur le bouton Editer les présentations de page du thème.
Dans la liste des présentations de page, dans la ligne Default layout [défaut], cliquez sur le bouton Editer la présentation.
Dans la zone Modules du front office - Modules inclus, voilà les modules utilisés et leur position dans la mise en page.
Nous avons bien un module Navigation dans la colonne Entête de page.
L'affichage
Et voilà une partie de l'affichage de la page d'accueil du site.
Par défaut tous les niveaux de menus imbriqués sont affichés.
Modifier le module Menu de navigation
La navigation actuelle
Le module de navigation qui est utilisé est un module de type Menu de navigation classique, sans aucune option particulière.
Présentation - Thème
Dans la liste des thèmes, dans la ligne du thème par défaut Contao Open Source CMS, cliquez sur le bouton Editer les modules du thème.
Dans la liste des modules, dans la ligne du module Navigation [Menu de navigation], cliquez sur le bouton Editer le module.
Les paramètres de navigation
Dans la zone Paramètres de navigation, le champ Niveau de départ a pour valeur 0, ce qui permet d'afficher tous les niveaux du menu depuis la « racine » du menu. Le champ Niveau de fin a pour valeur 0, ce qui permet d'afficher tous les niveaux d'imbrication du menu. Et l'option Limite n'est pas cochée, ce qui permet de ne pas limiter l'affichage des niveaux d'imbrication.
Modifier les paramètres de navigation
Pour ce menu de navigation, nous souhaitons n'afficher que les items de premier niveau, ceux à la « racine » du menu. Dans le champ Niveau de départ, laissez 0. Nous souhaitons limiter l'affichage au premier niveau d'imbrication dans ce menu, dans le champ Niveau de fin, saisissez 1. Enfin, pour activer cette limitation, coche l'option Limite.
En bas de la fenêtre, cliquez sur le bouton Sauvegarder et fermer.
L'affichage
Faites un aperçu de votre site : seuls les items à la racine du menu sont affichés.
Créer le deuxième module de navigation
L'objectif
Dans ce deuxième module de navigation, nous voulons afficher les items de menus imbriqués des items de premier niveau cliqué dans le premier module de navigation.
Création du module
Cliquez sur Présentation - Thème
Dans la liste des thèmes, dans la ligne du thème par défaut Contao Open Source CMS, cliquez sur le bouton Editer les modules du thème.
En haut de l'écran, cliquez sur le bouton Ajouter un module.
Zone Titre et type.
Dans le champ Nom du module, saisissez le nom voulu, Menu secondaire par exemple.
Dans le champ Titre, nous souhaitons avoir le nom de l'item de premier niveau cliqué dans le premier module de navigation. Saisissez : Menu : {{env::main_name}}.
Dans la liste déroulante des niveaux d'en-tête HTML, choisissez le niveau voulu.
Dans la liste déroulante Type de module, choisissez Menu de navigation.
Paramètres du module
Zone Paramètres de navigation.
Dans le champ Niveau de départ, saisissez 1. Nous ne voulons afficher que les items de premier niveau.
Dans le champ Niveau de fin, laissez 0. Nous voulons afficher tous les niveaux imbriqués.
Ne cochez pas l'option Limite, puisqu'il n'y a pas de limitation d'imbrication.
En bas de la fenêtre, cliquez sur le bouton Sauvegarder et fermer.
Placez ce nouveau module
Cliquez sur Présentation - Thème
Dans la liste des thèmes, dans la ligne du thème par défaut Contao Open Source CMS, cliquez sur le bouton Editer les présentations de page du thème.
Dans la liste des présentations de page, dans la ligne Default layout [défaut], cliquez sur le bouton Editer la présentation.
Dans la zone Modules du front end.
Dans la dernière ligne des modules inclus, cliquez sur le bouton Dupliquer la ligne.
Dans la liste déroulante Module, choisissez le module précédemment créé : Navigation secondaire.
Dans la liste déroulante Colonne, choisissez l'emplacement de ce module, Colonne de gauche par exemple.
En bas de la fenêtre, cliquez sur le bouton Sauvegarder et fermer.
L'affichage
Voici le site, avec la page d'accueil affichée.
Seuls les items à la racine du menu sont visibles.
Cliquons sur le lien Cours par exemple : le menu secondaire apparaît avec les items imbriqués et le nom du menu.
