Comment afficher un deuxieme menu simplifie

Bonjour,

J ai un autre petit probleme. Ou plus tot une demande supplementaire.

Plus haut tu m’a dit que je devais ajouter ceci

[+wf.classnames+]

Pour que j;ai la class "active" dans mon menu actif.
ce qui donen ceci:

(PS: J ai du entre temps modifier mon code pour que le lien englobe tout l image qui est affiche dans le div.

J’ai une petit question par rapport a ca avant.
[+wf.classnames+] affiche "active". Mais ou es-ce que c’est difini. Si je voulais que ca affiche "dada" (ou n’importe quoi d’autre) au lieu d’"active", comme le ferais-je?
Bon c est oas trop important car le "active" me va bien aussi. C’est plus par curiosite.

Maintenant le probleme qui m est posse est le suivant.

Pour reusme pour ca soit plus claire:
J ai donc 8 menus a gauche et trois de ses menu s’affiche en haut.
On a vu qui si on ajoute dans le wayfinder

&excludeDocs

suivit des id des page a exclure, on peut exclure de element du menu dans le menu

Et ceci marche tres bien.

La problematique est la suivante.

1) Quand je clique sur un element du menu de gauche et qui EST EXCLU du menu du haut, il faudrait que mes class du div n’ait pas d’etat


Donc [+wf.classnames+] n’affiche rien

2) quand je clique sur element de menu dont IL N EST PAS EXCLU du menu, il faudrait que mes class du div ait l’etat "active"
C’est ce qui est en place maintenant

MAIS il faudrait aussi que les deux autre element du menu ait l’etat inactive
Donc que [+wf.classnames+] affiche inactive lorsque que le troisieme est active.

J espere que vous comprener mon probleme.

En fait je dois jouer avec des images
Pour eut etre meiux comprendre voici le site
http://www.lacicogne.ch/reboutage.html

1) quand je clique sur un element du menu qui est exclu du menu d en haut, les trois images du menu d;en haut sont foncee (le cas ou [+wf.classnames+] ne doit rien affiche)

2) quand je clique sur l’un des menu d’en haut, les trois image este les memes, mais sont plus claire. Dans ce cas, si par exemple, je clique sur "Shiatsu", <div [+wf.id+] class="menu-intro [+wf.classnames+]"> devient "active" et les trois autre "inactive"

Ouf, j espere que je me suis bien fait comprendre

Milles mercis pour vos lumieres

Bonsoir,
Quote from: pierrot10 at Sep 28, 2009, 06:28 AM

[+wf.classnames+] affiche "active". Mais ou es-ce que c’est difini. Si je voulais que ca affiche "dada" (ou n’importe quoi d’autre) au lieu d’"active", comme le ferais-je?

Il te faut ajouter le paramètre &hereClass. Par exemple:

Pour le reste, pourquoi as-tu besoin d’une classe supplémentaire pour les éléments inactifs ?
Pourrais-tu nous donner un exemple ?

A partir du moment où tu as une classe pour l’élément actif, tu peux par définition cibler les éléments inactifs.

Salut, merci pour ton aide,

Mais ta solution fait la meme chose que

+wf.classnames+]

qui m’affichait "active" (peut on changer le nom de cette class?).

Maintenant que j ai mis

&hereClass=`dada`

Il m’affiche "data" au lieu de "active"

Ce qui ne change finallement rien.

L’idee est donc, pour les 2 des 3 menus qui ne sont pas exclu, aient une valeur de class differente que le menu actif.

Mais si une des menu qui est exclu du way finder est active, aucune class doit apparaitre.

Ouf, ca doit vous sembler complexe

Je ne comprends toujours pas pourquoi tu as besoin de classes spécifiques pour les éléments inactifs.
Qu’est-ce que tu n’arrives pas à faire ?

Quelques exemples pour t’aiguiller:

Salut
d’abord, je te remrcie encore pour tona. j’apprecie )

En fait je vais reprendre depuis zero. Je pense que ca va etre plus simple.
Voici le site
http://www.lacicogne.ch
Sur cette page, les trois image sont ok. La couleur ok. (="1ere categorie d’image")

Ensuite si tu va sur les page accueil, contact, et lien,
http://www.lacicogne.ch/accueil.html
Les trois image du haut doivent etre comme elle le sont, suaf qu’elles ont une bande rouge (= "2eme categorie d’image")

Si maintenant tu vas sur "Shiatsu", "Reboutage" ou "declenchement". Si tu va sur "shiatsu", par exemple. l’image avec le doit qui est tiré, doit etre celle de la categorie.

MAIS

Les deux autre deivent etre plus claire (="3 eme categorie d’image"). L’image lus claire n’est pas encore visible, car je ne trouve pas la soultion


il y a donc une particuliarite qui est demande par le client. Quand l’un des trois menue st selectionne, les deux autres image sont plus claire uniquement.

images de la categorie 1 = Sur la page de garde et quand le menu est "active" et sur la page de garde.
images de la categorie 2 = Quand ni Shiatsu, reboutage et declecnhement sont selectionne
image de la categorie 3 = Quand shiatsu, reboutage declenchement sont selectionne, pour l’un des trois.

Ouf, j’espere que tu as compris, je devienne que ca doit etre un peu.....


Maintenant je viens d’avoir une idee. Je suis tombe sur un poste que parle de
PHx: http://wiki.modxcms.com/index.php/PHx#Introduction

Pour avoir u truc du genre (ce code ne marche pas,c ar c’est le sujet du post

[+phx:if=`[[GetParent? &field=`id` &level=`0`]]`:is=`2`:then=`[[Wayfinder? &startId=`[[GetParent? &field=`id` &level=`0`]]` &level=`1` ]]`:else=`[[Wayfinder? &startId=`[[GetParent? &field=`id` &level=`1`]]` &level=`1`]]`+]

Je ne connais absolument pas ce plugin, mais je vais essaewr de mettre une conditioon autour d emon wayfinder.

Tu connais?

Ok, je comprends un peux mieux ce à quoi tu veux arriver.

Possible qu’il te faille passer par un petit snippet perso qui renvoie la classe appropriée. En pseudo-code, ça donnerait quelque chose comme:

si ID de la page = ID de l’élément {
afficher classe active
}
sinon si ID de la page = ID de l’un des deux autres éléments {
afficher classe inactive
}
sinon {
ne rien afficher
}

Bon, l’idée est là... Si je trouve un moment, j’essaierais de t’ajouter le code correspondant.

Non, non , ne te fatigue, pas je viens de trouver et ca marche tip top. OUF!!!!!!!!!
Oupie, je croyais pas reussi. Je mets la solution

Voilà en fin reussi, je vais etre bref et le plus explicite possible...

Voilà donc, j’ai un menu a gauche avec 8 élément.
En haut j’ai le meme menu mais avec uniquement 3 element de ce menu.

Voici deja le resultat
http://www.lacicogne.ch/declenchement.html (observer les photos du menu d’en haut)

Code permettant d’afficher le menu avec les 8 élément


Code qui permets d’exclure les cinq éléments

[[Wayfinder? &startId=`0` &excludeDocs=`1,2,42,52,62,72` &selfClass==`active`]]

La problematique etait donc la suivante:
Quand les 3 menus du haut sont (soit l’un soit l’autre active) les deux autre images doivent etre plus claire que normal

Pour cela, j’ai du faire avec PHx, que je en connaissait pas
http://wiki.modxcms.com/index.php/PHx

et ajouter ces deux truc a mon wayfinder:
&rowTpl=`menuIntroLi` &outerTpl=`menuIntroUl`

Ce qui donne a la fin (pour le menu du haut:


Ce deux chuck

&rowTpl=`menuIntroLi` &outerTpl=`menuIntroUl`

me permette de "personnalisé", ou plus tôt de faire usage a mon PHx.
Comme je l’ai compris, du moins comme je l’ai utilisé, PHx permets de faire usage a des conditions comment en PHP


Grace a mes conditions, j’affiche mes image en fonction de mon besoins.

Voici le code mes chuck:
Celui-ci permet de géré les <li>.

Et celui le <ul>, qui en realite ne strictement a rien (mais je l’ai laissé, il ne mage pas de pain).
Je l’avais utilisé pour mettre une classe personnalisée au <ul>, mais par la suite je n’avais cette utilité. Donc si vous enlevé le

&outerTpl=`menuIntroUl`

à votre wayfinder, ca marchera tout aussi bien.

Je reviens a mon chunk qui gere les <li> et c’est toute la magie++ ).

je vais vous recoller le code de maniere plus claire.
Attention, bien mettre tot ce code sur une ligne pour eviter des espace dans votre code HTML


J’avais aussi un probleme pour faire fonctionner mon PHx, car je n’avais pas cocher la case OnParseDocument
Voir ce topic : http://modxcms.com/forums/index.php/topic,40525.0.html.

Voilà donc vic d’autre faits.

J’ai 3 categorie d’image:
cat. 1:(pour la page de garde (home page)
menu-12-garde.jpg (12 = id de la page)
menu-22-garde.jpg (22 = id de la page)
menu-32-garde.jpg (32 = id de la page)
cat. 2: (pour les trois élément d emenu lors que l’un des cinq autres sont active
menu-12.jpg (12 = id de la page)
menu-12-over.jpg
menu-22.jpg (22 = id de la page)
menu-22-over.jpg
menu-32.jpg (32 = id de la page)
menu-32-over.jpg
cat. 3: (Pour que l’un des trois menu sont active - images eclaircie)
menu-12-intro.jpg (12 = id de la page)
menu-12-intro-over.jpg
menu-22-intro.jpg (22 = id de la page)
menu-22-intro-over.jpg
menu-32-intro.jpg (32 = id de la page)
menu-32-intro-over.jpg

J’espere que vous me suivez )

C’est que mon PHx rendre en matiere. Si vous observer bien ce code du chuck si dessus, j’ai mis les condition en rouge. Et elle trouve juste avant le -over.jpg ou le .jpg, de maniere a ce que intro soit ajouter si l’id de la page est egal à 12 ou 22 ou 32.

Ceci me permet d’afficher l’image éclairessie sur le menu 12, 22 ou 32 sont activé.

Aussi si vous observé, quand "Shiatsu" est actif, il n’y a plus d eligne rouge. Pour cela j’ai jouer avec les priorités des CSS, comme l’a écris Fairytree dans une des reponse ci-dessus.

Voilà, ouff, intéressant, car je n’avais jamais autant travailler avec wayfinder.

Alors j’espere que mon explication a été claire et que une partie de ceci, ou sera untile à quelqu’un.

HOléée!