Personnaliser les menus Joomla.

Personnaliser les menus Joomla.

Les menus sont les éléments fondamentaux de la navigation web. Ils sont à la base de la structure d’un site. Se déclinant en plusieurs formes et catégories, ils font partie des premiers éléments à maîtriser pour mettre en place une idée d’architecture de site web.

Avec Joomla, il est possible d’ajouter autant de menus que souhaité. De plus, Ils peuvent rediriger sur des pages, articles, liens externes… Tout dépend de la stratégie et des besoins à mettre en place sur le site. Pour ce faire, il n’y a donc pas de limite en termes de nombre d’items dans un menu. La possibilité de construire des menus à niveau est entièrement mise en place par les modules natifs de Joomla.

Finalement, pour commencer à appréhender la manipulation des menus avec Joomla, aucun élément externe n’est à ajouter, il suffit ni plus ni moins que Joomla soit installé et configuré. Néanmoins, dans le cadre de besoins spécifiques ou particuliers, il est également possible d’agrémenter sur un site web, des extensions gratuites et/ou payantes pour compléter la personnalisation des menus.

Convaincu par les possibilités qu’apporte le CMS Joomla pour les menus ? Si c’est le cas, commençons par regarder quelques usages qu’il faut absolument connaître pour manipuler le module menu sous Joomla.

Le module Menu Joomla.

Avant toute chose, regardons d’un peu plus près la structure du module de menu sur Joomla. Pour pouvoir visualiser les menus d’un site web avec Joomla, il y a deux chemins possibles à suivre en partant de la page Control Panel du back-office.

En passant par la barre latérale de gauche (1), la plateforme Joomla redirige vers la liste des menus du site web. Par défaut, après installation du CMS, nous retrouvons quatre éléments (Author Menu, Bottom Menu, Main Menu et Main Menu Blog).

En se dirigeant vers la section Menu de la barre de navigation du haut (2), nous retrouvons un accès direct à chacun des menus. Il existe également un accès plus rapide par le haut où il est possible d’accéder directement à l’un des menus pour y apporter une modification.

Ensuite, en retournant dans la section Menu (1), nous avons la possibilité de supprimer l’un des menus en le sélectionnant (1) puis en cliquant sur delete dans la barre d’action (2). Avec Joomla, la seule règle immuable concernant les menus, c’est qu’il y aura toujours un menu par défaut nommé Main Menu.

Ajouter des éléments dans un menu Joomla.

Utilisons le Main Menu présent sur tous les sites Joomla pour en apprendre davantage sur comment modifier un menu et ses items. Pour accéder à la fenêtre de personnalisation d’un menu, il suffit de cliquer sur le titre d’un des menus de la liste. Nous sommes alors redirigé vers une page de liste comme ceci:

Finalement, nous nous retrouvons dans la section Menus | Items (Main Menu). Cette fenêtre va nous permettre de manipuler les items affichés dans le menu Main Menu. Nous y retrouvons la liste des items du Menu (1) présentée sous une forme de liste ordonnée. L’ensemble des éléments de modification mis à disposition, se trouve dans la barre de modification (2) en haut de la page. Il y a également, juste en dessous de la barre de modification, une section dédiée au tri, dans le cas où nous aurions beaucoup d’items affichés dans le menu.

Nous pouvons assez facilement ajouter un élément aux menus en cliquant sur le bouton New dans la barre du haut. Nous sommes alors redirigé vers une fenêtre de paramétrage de l’item:

 La zone (1) est l’espace principal où nous allons déterminer quel élément afficher et selon quels paramètres. Nous avons à notre disposition, un choix conséquent d’éléments, cliquez sur le bouton bleu select pour qu’une liste de type d’élément de menu apparaisse. Plusieurs paramètres sont nativement présents pour modifier l’item à sa guise.

À nous de faire des essais afin de comprendre et choisir quels paramètres nous semblent les plus adaptés. Il est important avant de sauvegarder l’item de bien renseigner un titre (2), auquel cas nous ne pourrons pas terminer la création.

La zone (4) est assez particulière puisqu’elle offre des possibilités un peu plus techniques. Ici, nous avons la possibilité de créer une hiérarchie pour nos items avec le paramètre parent. Le statut de l’item est également modifiable à partir de cette section, tout comme les droits et permissions sur son apparition. Enfin, il est également possible dans le cadre d’un site multilingue, de limiter l’item à une langue spécifique.

Une fois l’item prêt, Il ne reste plus qu’à cliquer sur save & close pour le créer. En retournant sur la page Home du site web, nous retrouvons le Menu avec l’élément ajouté (1). Ici, nous avons choisi d’afficher un item se référant aux contacts sur le site.

C’est tout ce qu’il faut savoir pour ajouter des items au sein d’un menu avec Joomla. Après avoir ajouté tous les items nécessaires à la navigation, l’ordre d’apparition peut ne pas sembler cohérent. Regardons ensemble comment modifier l’ordre des items du menu.

Changer l’ordre des items dans un menu.

Pour changer l’ordre des items dans un Menu, il est nécessaire avant tout de retourner dans la section Menu | Items du Menu en question. Une fois sur la page, nous retrouvons un choix d’ordre avec la liste déroulante à droite (1).

Pour gagner du temps, il est possible de faire glisser et déposer les éléments afin de changer manuellement l’ordre. Pour ce faire, cliquez et glissez à partir de l’icône à gauche de la ligne de l’item (2).

En retournant sur la page d’accueil, nous constatons sans grande surprise, que les items ont bien changés d’ordre.

Ordonnez dès à présent comme bon vous semble vos menus par ordre alphabétique, numéraire ou personnalisé. Une fois cette étape de réalisée, si le Menu contient beaucoup d’élément, il serait intéressant de construire des sous-menus et faire apparaître une architecture hiérarchisée.

Comment réaliser des sous-menus avec Joomla ?

Nous avons déjà vu lors de la création de l’item, qu’il existe un paramètre nommé Parent Item. En retournant dans la section Menu | Edit Item de l’un de vos éléments, cliquez sur cette liste déroulante. Un choix de parent sera proposé, ce sont en réalité, les autres items du même Menu. Si nous décidons d’inscrire un parent, il est impératif de sauvegarder les modifications avant de quitter la page.

En choisissant un parent, l’item en question deviendra un lien de second niveau dans la hiérarchie du Menu. Ceci sera représenté visuellement sur le site web:

C’est une manipulation simple mais qui aura des conséquences majeures lorsqu’un menus s’étoffent. Selon le thème et les extensions appliquées, les sous-menus seront visuellement différents. À présent, rentrons un peu plus dans les détails en apportant des actions un peu plus complexes.

Comment transférer un élément d’un menu à l’autre ?

Parfois, il arrive que des items ont été construits dans un mauvais menu et que nous souhaitons les déplacer d’un Menu à l’autre. Il est possible de réaliser cette manipulation en supprimant l’élément de l’ancien Menu et de construire de nouveau l’item dans l’autre menu, mais ce ne serait pas efficace. Il existe un moyen simple de passer un item d’un Menu à l’autre sur Joomla. Voyons ensemble comment faire:

Première chose, nous devons revenir à la section Menus | Items (Nom Menu)  du menu où se trouve l’élément à transférer.  Une fois dans la section, cochez l’item à déplacer et cliquez sur le bouton Batch.

Une fois le bouton Batch cliqué, une fenêtre s’ouvrira avec plusieurs paramètres de liste déroulante. Celle qui nous intéresse est To move or copy your selection please select a menu or parent item.

Nous y retrouvons l’ensemble des menus disponible sur le site web. Il ne reste plus qu’à choisir le menu d’envoi et le tour est joué. Cliquez sur Process et vérifiez que le message de validation apparaît bien sur la page.

Retournez sur la page Home du site web et vérifiez que le transfert de l’item à eu lieu. Si c’est le cas, le transfert est un franc succès et nous avons réussi le passage d’un item d’un menu à l’autre. Dans le cas contraire, il faut reprendre le processus depuis le début.

Créer un module permettant d’afficher un menu sur une page Joomla.

Lors de nos modifications, nous avons pû remarque que le menu s’affiche toujours dans sa zone dédiée. Dans les exemples précédents, nous avons conservé la zone que Joomla propose par défaut. Joomla nous donne la capacité de créer notre propre zone d’affichage grâce à un module. Pour ce faire, il faut commencer par construire le module, puis y intégrer le menu. Voyons ensemble les étapes clés:

Commençons par découvrir une nouvelle section, celle des modules. À partir de la page panel, cliquez sur Modules.

Nous retrouvons ici, la liste des modules présents sur le site. Nous n’allons pas rentrer dans les détails pour cette fois. Pour créer un nouveau module, cliquez simplement sur Add.

La fenêtre suivante s’ouvre et propose de choisir un type de module. Pour cette fois, nous allons utiliser un module de Menu.

Une fois dans la zone dédiée au paramétrage de notre module de menu, nous allons pouvoir renseigner le nom de celui-ci (1), le menu qui y sera affiché (2), son emplacement (3) et l’ordre du menu (4). Comme toujours, il y a bien d’autres paramètres qui peuvent être manipulés pour personnaliser un module de Menu. Une fois notre choix validé, nous n’avons plus qu’à cliquer sur le bouton Save.

En retournant dans la prévisualisation du site, nous retrouvons à présent notre module de menu à la zone indiquée lors du paramétrage. Ici, nous avons utilisé la position 1 Top pour afficher le menu en haut de page. Selon la position, le design du Menu peut légèrement changer.

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer