Classe active sur menu "alias de menu" ?

[ikeda]

Bonjour,

Sur le site que je réalise, il y a un menu principal (normal…) et l'une de ses rubriques comporte des sous menus.
Soit :
A
B
- b1
- b2
- b3
C

J'ai intégré un autre menu sur les pages b1 b2 et b3 pour permettre de passer d'une page à l'autre de façon directe.
Ce qui me donne quelque chose comme :
b1 | b2 | b3

Pour mettre en place les liens de ce menu spécifique, j'ai choisi "liens divers / alias de lien de menu". Je n'ai plus qu'à choisir les sous menus de mon menu principal pour mettre en place les liens de mon menu b1 b2 b3.

Toute est OK… sauf que je vois dans mon code que je n'ai pas de classe active qui me permettrait de styler le lien de la page sur laquelle je suis.

C'est à dire que si je suis sur la page b2 je voudrais obtenir le menu suivant :
b1 | B2 | b3

Est-ce que je m'y suis mal pris ? Une idée ?
Merci à vous ! :-)

[Rajoz]

Re : Classe active sur menu "alias de menu" ?

Bonjour ikeda,

Avoir un lien sur ton site et connaître la version de Joomla! et le template utilisés nous aiderait à t'aider.

Je vais te montrer ce que j'obtiens sur mon site de test : Joomla! v3.4.4 avec exemples en français et template Protostar.

1) Menu (je n'utilise qu'un seul menu)

• Accueil
• Sites exemples
• Joomla.org
• Joomla.fr
• Blog --> lien sur le blog de la catégorie qui contient 3 articles
  • b1 --> lien sur Premier article du blog
  • b2 --> lien sur Second article du blog
  • b3 --> lien sur Troisième article du blog

2) Premier module = Menu Haut

• position = position-1
• niveau de départ = 1
• dernier niveau = Tout
• Afficher tous les liens = Oui
• Suffixe CSS de menu = nav-pills (classe utilisée pour menu horizontal de Bootstrap)

3) Deuxième module = Menu Haut (2)

• position = position-3
• niveau de départ = 2 (pour n'avoir que le niveau b1, b2, b3)
• dernier niveau = 2
• Afficher tous les liens = Non
• Suffixe CSS de menu = nav-pills majuscule
  • nav-pills = classe utilisée pour menu horizontal de Bootstrap
  • majuscule = classe utilisée pour distinguer ce module pour faire la majuscule (uppercase)

4) Code CSS ajouté à la fin de template.css
La sélection se fait à la fois sur majuscule (pour ne concerner que le module avec cette classe) et sur active (pour ne concerner que le lien actif) :

.nav-pills.majuscule > .active > a,
.nav-pills.majuscule > .active > a:hover,
.nav-pills.majuscule > .active > a:focus {
	text-transform: uppercase;
}

5) Résultat
J'ai sélectionné le deuxième article (b2), le résultat est le même que se soit par le déroulant sous Blog du premier module ou en cliquant sur le b2 du deuxième module (cliquer sur l'image pour l'agrandir) :

Le b2 est en majuscule. On retrouve bien la classe active qui lui correspond sur le code HTML du deuxième module :

<div class="moduletable">
    <h3>Menu Haut (2)</h3>
    <ul class="nav menu nav-pills [COLOR="#FF0000"]majuscule[/COLOR]">
        <li class="item-507"><a href="index.php/blog/b1">b1</a></li>
        <li class="item-508 current [COLOR="#FF0000"]active[/COLOR]"><a href="index.php/blog/b2">[COLOR="#FF0000"]b2[/COLOR]</a></li>
        <li class="item-509"><a href="/prive/test-j344/index.php/blog/b3">b3</a></li>
    </ul>
</div>

Amicalement,
Rajoz

[ikeda]

Re : Classe active sur menu "alias de menu" ?

Merci Rajoz pour cette réponse si détaillée !

Pour te répondre, mon site est pour l'instant en local.
J'utilise le template Callisto de Rocket Theme + l'extension Flexicontent.
Je suis toujours sous Joomla 3.4.3, j'attendais de voir ce que donnait la version 3.4.4 avant de faire la mise à jour. Y a t-il eu des retours, pas de trop gros bugs à signaler, je peux me lancer ?

Si je comprends bien, tu me suggères d'utiliser une autre instance du même menu, mais avec un autre niveau de départ pour les liens ? La piste me semble intéressante. D'après mes premiers essais, ça semble fonctionner et j'ai bien une classe active dans mon code ! Me reste à travailler les CSS et ça devrait le faire.

Je repasse dire ce que ça donne.
Un grand merci à toi :-)