Les menus sont des éléments indispensables pour afficher et structurer le contenu de votre site Joomla. Cassiopeia, le template par défaut de Joomla 4, propose plusieurs solutions pour les afficher à différents endroits, aussi bien horizontalement que verticalement. Nous allons voir au travers de ce tutoriel, tout ce qu'il faut savoir sur les menus dans le template Cassiopeia de Joomla 4.

Le menu vertical de Cassiopeia

Lors de l'installation standard de Joomla 4, le menu principal de votre nouveau site est affiché par défaut dans la position de module sidebar-right du template Cassiopeia. Les différents liens de menu sont affichés verticalement.

Menu cassiopeia sidebar-left

Afficher le slogan à côté du logo dans Cassiopeia

Par défaut dans Cassiopeia, le slogan s'affiche sous le logo ou sous le titre. Si vous souhaitez l'afficher à droite comme je l'ai fait, ajoutez simplement ce code dans le fichier user.css de votre template :

.site-description {display: inline-block; margin-left: 10px;}

Ce qui donnera ceci :

Menu cassiopeia slogan à droite

Afficher le menu principal horizontalement dans Cassiopeia

Si vous souhaitez afficher horizontalement votre menu principal, Cassiopeia propose une position de module justement appelée Menu qui convient parfaitement.

Pour cela, nous allons devoir modifier les paramètres par défaut du module affichant le menu principal.

Depuis le panneau d'administration de Joomla 4, cliquez sur Modules dans la rubrique Site :

Accès gestionnaire des modules

A l'aide des filtres, localisez le module Main Menu qui est publié en position sidebar-right. Ouvrez-le et modifiez les paramètres suivants :

  • Assignez votre module à la position de template Menu

Ouvrez maintenant l'onglet Avancé et modifiez les paramètres suivants :

  • Type de mise en page : choisissez : Collapsible Dropdown ou Dropdown
  • Tag de module : choisissez Nav à la place de Div

Cliquez sur Enregistrer & Fermer pour sauvegarder vos modifications. Le menu principal s'affiche maintenant horizontalement :

Les menus dans le template Cassiopeia

Quelles sont les différents types de mise en page du menu ?

  • Menu rétractable par défaut
    Le menu est affiché sans les sous-menus. Un "hamburger" s'affiche sur les mobiles.
  • Défaut
    Le menu est affiché sans les sous-menus. Sur mobile, le menu est affiché verticalement.
  • Collapsible Dropdown
    Le menu est affiché avec des sous-menus. Un "hamburger" s'affiche sur les mobiles.
  • Dropdown
    Le menu est affiché avec des sous-menus. Sur mobile, le menu est affiché verticalment.

Type de mise en page du menu

Afficher un menu horizontal dans le footer de Cassiopeia

Si vous souhaitez afficher un menu horizontalement dans la position de module Footer de Cassiopeia, affectez la position de module Footer au module que vous souhaitez afficher à cet emplacement et effectuez les réglages suivants dans l'onglet Avancé :

Ouvrez maintenant l'onglet Avancé et modifiez les paramètres suivants :

  • Classe de menu : menu-horizontal
  • Type de mise en page : Dropdown
  • Tag de module : nav

Les menus dans le template Cassiopeia

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net