Ajouter une classe au premier et dernier élément de menu

Par défaut, les menus Joomla ne possèdent pas de classe CSS et ne sont donc pas personnalisables au niveau de l’affichage. Dans ce tutoriel, nous allons voir comment ajouter une classe CSS au premier ainsi que qu’au dernier élément de menu. Ceci pourra vous être utile par exemple si vous voulez changer l’apparence du premier élément de menu ou alors si vous voulez ne pas afficher le caractère de séparation du dernier élément de menu.

Avec Joomla, pour afficher vos éléments de menu vous devez publier un module de type mod_mainmenu qui sera lui-même lié à votre menu. Pour ajouter ces classes, nous allons donc modifier le fichier /tmpl/default.php qui se trouve dans le répertoire modules/mod_mainmenu.

Afin de ne pas modifier le fichier source de Joomla, nous allons utiliser la fonctionnalité du template overriding qui consiste à travailler directement depuis le répertoire /html de votre template. Veuillez donc créer le répertoire html à la racine de votre template si celui-ci n’existe pas puis dans ce répertoire veuillez créer le répertoire mod_mainmenu. A l’intérieur de ce dernier répertoire, vous allez copier le fichier qui se trouve dans le répertoire modules/mod_mainmenu/tmpl/default.php.

Nous allons maintenant éditer le fichier default.php que vous venez de copier et rechercher le code ci-dessous :

if ($node->name() == 'ul') {
	foreach ($node->children() as $child)
	{
		if ($child->attributes('access') > $user->get('aid', 0)) {
			$node->removeChild($child);
		}
	}
}

Avant le dernier crochet nous allons rajouter quelques lignes de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

if ($node->name() == 'ul') {
	foreach ($node->children() as $child)
	{
		if ($child->attributes('access') > $user->get('aid', 0)) {
			$node->removeChild($child);
		}
	}
        //DEBUT NOUVEAU CODE
	$children_count = count($node->children());
	$children_index = 0;
	foreach ($node->children() as $child) {
		if ($children_index == 0) {
			$child->addAttribute('class', 'premier');
		}
		if ($children_index == $children_count - 1) {
			$child->addAttribute('class', 'dernier');
		}
		$children_index++;
	}
        //FIN NOUVEAU CODE
}
 

Pour terminer, n’oubliez pas de sauvegarder le fichier.

Ajouter un commentaire