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 Les menus dans le template 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.
Afficher le slogan à côté du logo dans Cassiopeia Les menus dans le template 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 :
Afficher le menu principal horizontalement dans Cassiopeia Les menus dans le template 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 :
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 :
Quelles sont les différents types de mise en page du menu ?Les menus dans le template Cassiopeia
- 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.
Afficher un menu horizontal dans le footer de Cassiopeia Les menus dans le template 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
