next »

[Jul]

Bonjour,

Je ne parviens pas à faire fonctionner correctement le menu déroulant à 4 niveaux de CSSPlay :
http://www.cssplay.co.uk/menus/final_drop2.html

Il n'y a pas de configuration prête à l'emploi dans le dossier \assets\snippets\wayfinder\configs.
J'ai essayé d'utiliser cssplay-dropdown.config.php mais ça ne marchait pas du tout, même en changeant la feuille de style listée.

J'ai essayé de créer mes chunks sur la base du code source de la démo listée.
Ca fonctionne plutôt bien sous Firefox 3 et Safari 3, avec toutefois les menus de 3e et 4e niveau qui s'affichent trop tôt, c'est-à-dire en même temps que les menus de 2e niveau. Sous MSIE 7, les menus ne se déroulent pas.

Ci-dessous mes chunks et mon appel de Wayfinder. En pièce jointe, ma feuille CSS et l'output de Wayfinder, réindenté manuellement pour une meilleure lisibilité.
Pour le modèle des parent rows, j'ai essayé de remplacer <a [+wf.classes+] par <a class="drop" pour que ça colle à la démo, mais ça n'a rien changé. Je ne suis d'ailleurs pas parvenu à trouver où cette classe "drop" est définie, ceci malgré l'aide de Firebug.

Merci pour votre aide.

Code:

AP_wfd_outerTpl :
-----------------
<ul>[+wf.wrapper+]</ul>

AP_wfd_rowTpl:
---------------
<li [+wf.classes+]><a href="[+wf.link+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

AP_wfd_parentRowTpl:
---------------------
<li>
    <a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]»
    <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

AP_wfd_ultimate_drop_css:
------------------------
<link rel="stylesheet" media="all" type="text/css" href="AP_wfd_ultimate_drop.css" />

L'appel de Wayfinder:
--------------------
<div class="menu">
[!Wayfinder? &startId=`49` &level=`4` &outerTpl=`AP_wfd_outerTpl` &rowTpl=`AP_wfd_rowTpl` &parentRowTpl=`AP_wfd_parentRowTpl` &cssTpl=`AP_wfd_ultimate_drop_css'!]
</div>

[Perrine]

Hello Jul,

J'ai comparé ton HTML avec la démo et n'ai pas trouvé de différence.

On avait fait ce genre de menu l'année dernière sur -http://www.sudprovence.net/ et voici le &parentRowTpl que nous avions utilisé :

Code:

<li [+wf.classes+]><a class="top [+wf.classnames+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]><a class="topie" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<table><tr><td><![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

Pas de &rowTpl en revanche

Par contre, nous étions sur un menu à 2 niveaux, donc je ne sais pas si tu y trouveras ton compte.

Sinon, as-tu été voir du côté english, m'étonnerait pas que d'autres que toi aient rencontré le même problème

[Jul]

Hello Perrine,

Merci pour ton exemple. Je suis allé voir, mais c'est effectivement un menu à plus de 2 niveaux qui m'intéresse.

Oui j'étais allé voir du côté anglophone du forum et on m'a proposé de tester la configuration adoptée par Multiflex: http://modxcms.com/forums/index.php/topic,29937.0.html

J'avais également trouvé la question d'un autre utilisateur, mais il ne comprenait pas la nécessité du <div class="menu"></div> autour de l'appel de Wayfinder. Ses connaissances en feuilles de style semblaient donc assez limitées.

J'ai pu tester la configuration de menu fournie avec Multiflex 5 (téléchargement, cf. http://modxcms.com/Multiflex-5-1844.html).

Multiflex 5 utilise des définitions différentes pour les chunks. Les marquages <ul> ne se font pas au niveau du outerTpl mais au niveau des chunks intérieurs. Multiflex 5 utilise aussi un chunk innerTpl en plus de ceux que j'utilisais.

L'aspect positif est que le drop-down des entrées de 1er niveau (c.-à-d. de la barre de menu) a fonctionné, sous MSIE également. Par contre, le 3ème et 4ème niveau continuent de s'afficher dès que le 2ème niveau s'affiche.

J'ai aussi l'impression que l'exemple est limité à 3 niveaux contre 4 pour le menu de CSSPlay.

Il faudrait que je décortique le tout avec papier crayon, quitte à récrire la feuille de style en repartant à zéro.
Je trouve très difficile de savoir si c'est au niveau des chunks utilisés, de la feuille de style ou des deux que ça coince.

Il semble en tout cas qu'il faille enrober les <ul></ul> dans un <table><tr><td>...</td></tr> pour que ça fonctionne sous MSIE. Se pose alors la question de savoir s'il n'est pas plus rationnel d'écrire tout le jeu de menu sous la forme de lignes de tableau plutôt que de <li>. Ca éviterait peut-être d'avoir à définir deux types de styles: ceux pour MSIE et ceux pour les autres navigateurs.

Bref, je ne suis pas encore sorti de l'auberge. 
Ca doit pourtant être une erreur toute bête dans les chunks que j'utilise puisque la démo de CSSPlay marche à merveille.

Je n'ai pas encore testé ton parentRowTpl.

[Jul]

Bonjour à toutes et à tous,

J'ai l'impression d'être à deux doigts de réussir la configuration du menu Wayfinder à 4 niveaux, mais un ou deux détails me résistent.
( cf démo : http://www.cssplay.co.uk/menus/final_drop2.html )

Ma structure de balises semble identique à celle utilisée par CSSPlay. Mais comment diable son auteur fait-il pour placer un <a class="drop"> dans ce qui semble être des "parent row", sauf dans les "parent row" de 1er niveau ?

J'ai essayé d'ajouter le class="drop" dans le chunk parentRowTpl, mais évidemment ça venait aussi pour les "parent row" de 1er niveau. J'ai aussi essayé [+wf.classes+], mais alors c'était des class="last" qui s'inséraient par-ci par-là.
(Au passage, je ne vois pas non plus comment l'auteur de CSSPlay s'y prend pour insérer un class="upone" qui donne un comportement particulier à l'une des entrées de menu.)

Voici mon appel de menu Wayfinder, mes chunks, et en pièces jointes, la structure utilisée par CSSPlay et celle générée par mon appel de Wayfinder. (J'ai un peu simplifié le code et réindenté pour une meilleure lisibilité, mais la hiérarchie reste conservée.)

Pour la feuille de style, j'utilise celle se trouvant dans le code source de la démo (entre les balises <style></style>).

Code:

<div class="menu">
[!Wayfinder? startId=`49` &outerTpl=`AP_wfd_outerTpl` &innerTpl=`AP_wfd_innerTpl` &parentRowTpl=`AP_wfd_parentRowTpl` !]
</div>

AP_wfd_outerTpl :

Code:

<!--outer-->
<ul>
[+wf.wrapper+]
</ul>
<!--fin de outer-->

AP_wfd_innerTpl :

Code:

<!--inner-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    [+wf.wrapper+]
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<!--fin de inner-->

AP_wfd_parentRowTpl :

Code:

<!--parentRow-->
<li><a class="drop" href="[+wf.link+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
[+wf.wrapper+]
</li>
<!-- fin de parentRow-->

L'utilisation d'un chunk pour &rowTpl apparaît inutile dans un premier temps.

Le plus difficile me semble de savoir exactement combien de chunks différents utiliser et lesquels.
L'utilisation de outerTpl et de innerTpl m'a paru nécessaire.