Sous-menus

Principes de base des menus

Dans Joomla, trois éléments contribuent à l'affichage d'un menu à l'utilisateur :

• Un Menu est un conteneur pour des liens de menu.
• Un Lien de menu est un lien vers une page du site ou une page externe.
• Un Module de menu fournit une méthode pour attribuer le menu à une position sur la page et contrôler certains aspects de l'apparence ou du comportement du menu ou de la page.

Les menus simples consistent en des listes de liens. Parfois, les membres d'une liste ont des relations parent-enfant affichées sous forme d'éléments enfants indentés ou de listes déroulantes. Les relations parent-enfant peuvent être imbriquées à n'importe quel niveau. Cependant, une imbrication au-delà de deux niveaux peut rendre les listes peu esthétiques et difficiles à utiliser.

Il existe des cas où vous pourriez vouloir afficher les enfants d'un menu parent sous forme de sous-menu séparé. Un cas d'utilisation courant consiste à afficher un sous-menu à gauche d'une page, le contenu de la page au centre, et une table des matières de la page à droite. Ce tutoriel explique comment procéder.

Exemple de données

Supposons que vous ayez une série d'articles sur les animaux. Il pourrait s'agir d'animaux de compagnie, d'une fiche d'information vétérinaire ou d'un zoo. Voici un exemple de structure courte à des fins de démonstration :

Animaux
    Chats
        Birman
        Bleu russe
    Chiens
        Colleys
        Poméraniens

Les listes pourraient être assez longues, vous pourriez donc vouloir afficher seulement une liste de races de chats sur les pages concernant les chats et seulement une liste de races de chiens sur les pages concernant les chiens. La capture d'écran suivante montre la mise en page cible que l'utilisateur souhaiterait obtenir :

Dans cet exemple, lorsque l'utilisateur sélectionne le lien de menu Animaux, la page Animaux se charge et le module de sous-menu Chats disparaît (le module Chiens aussi). Sélectionner le lien de menu Chats et le module de sous-menu Chats apparaît à côté de la page Chats. Sélectionner le lien de menu Birman et la page Birman apparaît. Sélectionner le lien de menu Chiens et le module de sous-menu Chats est remplacé par un module de sous-menu Chiens à côté de la page Chiens.

Pour essayer ce tutoriel par vous-même, vous aurez besoin de créer quelques articles, un menu avec des liens de menu et trois modules de menu.

Créer des articles

Si vous êtes très efficace, vous pouvez créer un article puis créer un lien de menu à partir de l'article. Pour cela, vous devrez d'abord créer un nouveau menu et effectuer quelques étapes supplémentaires lors de la création de l'article. Il est donc préférable de garder les choses simples au départ et de commencer par vos nouveaux articles :

• Sélectionner Contenu → Articles → + depuis le menu d'Administration. Ou sélectionner le bouton Nouveau depuis la liste des articles.
• Remplir le formulaire comme vous le feriez pour n'importe quel article.
• Sélectionner le bouton Enregistrer & Nouveau plutôt que Enregistrer & Fermer pour passer au nouvel article suivant.

Les exemples de données présentés ci-dessus nécessitent sept articles.

Créer un nouveau menu

Depuis le menu d'Administration :

• Sélectionner Menus → Gérer.
• Dans la page de liste des menus, sélectionner le bouton Nouveau pour créer un nouveau menu.
• Dans le formulaire Menus : Ajouter, donner au menu un titre : Animaux et un nom unique : animaux.
• Dans certains cas, vous pourriez avoir besoin de vous rappeler à quoi sert ce menu. Remplissez donc le champ de description.
• Enregistrer ou Enregistrer & Fermer.

Créer les liens de menu

Il y a sept liens de menu à créer.

Lien de menu Animals

Les nouveaux liens de menu seront situés dans le menu Animals.

• Sélectionner Menus → Animals → + depuis le menu d'Administration.
• Remplir le formulaire Menus : Modifier un lien.
  • Titre : Animals
  • Type de lien de menu : Article Unique
  • Sélectionner un article : Animals - c'est l'article parent utilisé pour introduire la série sur les animaux
  • Menu : Animals
  • Parent : - Aucun Parent - c'est la racine du menu
• Sélectionner Enregistrer & Nouveau dans la liste déroulante Enregistrer & Fermer.

Lien de menu Cats

Ceci reprend largement le lien de menu Animals. Sauf que :

• Le titre doit être Cats.
• L'article sélectionné dans le champ Sélectionner un article doit être Cats.
• Le lien parent doit être défini sur Animals.

Lien de menu Burmese

Recommencer. Sauf que :

• Le titre doit être Burmese.
• L'article sélectionné dans le champ Sélectionner un article doit être Burmese.
• Le lien parent doit être défini sur Cats.

Plus de liens de menu

Continuer jusqu'à avoir sept liens de menu, un pour chaque article.

Liste des liens de menu

Lorsque vous avez créé tous vos liens de menu, vérifier qu'ils ont les bonnes relations parent-enfant et qu'ils sont dans le bon ordre. Vous pouvez trier sur la colonne Tri (la deuxième colonne) et utiliser les poignées (ellipse verticale) pour glisser les éléments dans le bon ordre. Si un élément a un mauvais parent, il suffit de sélectionner le titre de l'élément et de changer le parent dans le formulaire Menus : Modifier un lien.

Modules de menu

À ce stade, vous avez un menu mais il n'a pas de module à affecter à une position sur la page. Vous pourriez utiliser le menu entier comme menu standard ou menu déroulant. Cependant, le but de ce tutoriel est de démontrer comment créer des sous-menus. Pour cela, vous avez besoin de trois modules différents :

• Un module Animals pour un sous-menu avec des liens de menu sur Animals, Cats et Dogs.
• Un module Cats pour un sous-menu avec des liens de menu sur les races de chats.
• Un module Dogs pour un sous-menu avec des liens de menu sur les races de chiens.

Module de sous-menu Animals

Depuis le menu d'Administration :

• Sélectionner Contenu → Modules Site → + ou sélectionner Nouveau depuis la liste des Modules (Site).
• Sélectionner le module Menu.
• Dans le formulaire Modules : Menu, saisir les données suivantes :
  • Titre : Animals
  • Sélectionner le Menu : Animals
  • Élément de base : Animals (c'est le lien de menu parent)
  • Niveau de départ : 1
  • Niveau de fin : 2 (cela limite les éléments aux liens de menu Cats et Dogs)
  • Position : sidebar-left (ou là où cela vous convient)

Affectation de menu Animals

Les sous-menus sont normalement affichés uniquement sur les pages où ils sont pertinents, dans ce cas sur seulement trois pages. Depuis l'onglet Affectation de Menu :

• Définir le champ Affectation du Module sur Uniquement sur les pages sélectionnées. Cela révèle une liste hiérarchique de tous les éléments dans tous les menus.
• Cocher les cases en face de Animals, Cats et Dogs.
• Cocher les cases en face des races de chats et de chiens. Sinon, le sous-menu Animals disparaîtra sur les pages consacrées aux races.
• S'assurer qu'aucune autre case n'est cochée.
• Enregistrer & Fermer

Module Sous-menu Chats

C'est très similaire :

• Sélectionner Contenu → Modules 'Site' → + ou sélectionner Nouveau depuis la liste des Modules (Site).
• Sélectionner le module Menu.
• Dans le formulaire d'édition Modules : Menu, saisir les données suivantes :
  • Titre : Chats
  • Sélectionner le Menu : Animaux
  • Élément de base : Chats (c'est le lien de menu parent)
  • Niveau de départ : 3
  • Niveau de fin : Tous
  • Position : sidebar-left (ou celle qui vous convient)

Affectation de Menu Chats

Depuis l'Affectation de Menu

• Régler le champ Affectation du Module sur Uniquement sur les pages sélectionnées. Cela affiche une liste hiérarchique de tous les liens de tous les menus.
• Cocher les cases en face de Chats, Birman et Bleu russe. Veillez à ce qu'aucune autre case ne soit cochée.
• Enregistrer & Fermer

Module Sous-menu Chiens

Plus de la même chose...

Alias de Lien de menu

Jusqu'ici tout va bien ! Mais il n'y a aucun lien vers la page Animaux depuis le Menu Principal, ni depuis aucun des autres menus du site. Le moyen le plus simple de corriger cela est d'utiliser un Alias de Lien de menu. Pour cet exemple, une entrée est créée dans le menu en haut de la page, intitulé Main Menu Blog. Depuis le menu d'Administration :

• Sélectionner Menus → Main Menu Blog (ou tout autre menu de site de votre choix).
• Sélectionner le bouton Nouveau dans la barre d'outils.
• Remplir le formulaire Menus : Modifier le lien
  • Titre : Animaux
  • Alias : creatures - il existe déjà un lien de menu nommé Animaux, vous devez donc utiliser un alias différent.
  • Type de lien de menu : Alias de Lien de menu
  • Lien de menu : Animaux - sélectionné depuis la liste des liens de menu existants.

• Enregistrer
• Tri - après l'enregistrement, l'ordre peut être changé. Dans cet exemple, il est placé en premier.

Vérifier le Résultat

Consulter les pages de votre site. Dans cet exemple, la plupart des pages n'afficheront pas les sous-menus dans la position de gauche. Le lien Animaux dans le menu du haut ouvrira la page animaux depuis laquelle il est possible de naviguer vers les pages Chats ou Chiens :