Construction de menu...

Bonsoir,

Je suis un tout nouvel utilisateur de MODx et débutant dans les langages HTML/PHP, sans dire qu’il s’agit de mes premiers balbussiments en ce qui concerne les CSS.
Vous devez vous dire que ça commence bien, n’est ce pas ? ^^

Je viens donc vers vous avec plusieurs questions, car je n’arrive pas à construire mes menus, j’ai parcourru la secion francophone sans trouver mon bonheur...

La template que j’utilisais pour mes pages HTML (que j’ai réussi à appliquer à MODx), utilise le type de menu dont voici une partie du code :


Il s’agit d’un menu horizontale, pour lequel il faut que j’indique en dur chaque lien pour chaque bouton, hors en comparant avec la minimal template, je découvre que la partie concernant les menu est vraiment minime... Et que en fait elle ne reprend aucun lien :


Voici donc la première de mes questions, comment puis je adapter mon menu de la même façon que la minimal template ?

Merci d’avance pour vos réponses éventuelles

salut et bienvenue parmi nous,

Dans le template fourni par défaut avec modx on trouve l’appel au snippet [[DropMenu]] sans paramètres.
Si tu as eu la curiosité de regarder le code source de DropMenu, tu as sans doute remarqué qu’il existe une foule de réglages possibles.

Par exemple tu peux indiquer un dossier de départ pour limiter le menu à un contenu de ton choix cela donnera
[[DropMenu?startDoc=`5`]]

Parmi ces paramètres il existe "pre" et "post" qui te permette d’encadrer les liens du menu par des balises html de ton choix.

[[DropMenu?startDoc=`5` &pre=``&post=``]]<br /><br />En revanche, j’ai essayé rapidement de rajouter la class à la balise mais il semble que les quotes (") sont mal acceptées. Il te suffira de modifier ton css pour pallier au probleme de style ou de trouver la bonne syntaxe pour integrer le code que tu souhaites voir encadrer la balise <a></a><br /><br />En clair tu n’as pas à coder le menu en dur mais plutôt de paramètrer le snippet de manière à reproduire au plus près le code de ta maquette et si cela n’est pas entièrement réalisable tu peux soit hacker le menu en rajoutant ce qu’il te manque ou modifier ton css de façon à coller au fonctionnement du menu.<br /><br />Je sais pas si je suis très clair mais il est tard :-) <br /><br /><br />EDIT: je me rends compte à la lecture que j’ai partiellement répondu à ta question (du moins j’aime le croire ;-)<br /><br />en ce qui concerne ton css<br />tu devras apporter les modifs suivantes<br /><br />changer le id de <ul> pour une class<br /><br />. main_nav_list{}<br /><br />.main_nav_list li a --> pour remplacer .main_nav_item<br /><br />pour le lien actif dans ton appel au snippet tu peux rajouter [[DropMenu?startDoc=`5` &pre=``&post=`` &hereclass=`main_nav_active_item` &topnavClass=`main_nav_list` ]]

hereclass= definit la class à appliquer au lien actif et topnavClass la class de la balise ul du menu

et pour ton span

.main_nav_list li a span {} devrait convenir pour appliquer .main_nav_item_text si le span est vraiment nécessaire

J’ai pas du tout testé donc c’est à vérifier.

Bonjour,

Merci pour votre réponse, qui n’est malheureusement pas très clair pour moi en tout cas (n’oublions pas que je ne suis qu’un débutant autodidacte)... Bien que vous répondiez à mes interrogations.

J’ai effectivement consulté le snippet du [dropmenu], j’ai bien essayer d’appliqué l’une des fonction proposée (topmenu), mais le résultat n’est pas celui que j’attendais, certainnement une mauvaise configuration de ma part.

Voici l’image de mon menu sans modification (et sans l’image:du bouton page active)

et celui obtenu après modification


On voit sur cette seconde image, que en plus le menu reprend en plus le sous menu, ce qui ne m’interesse pas. De plus, les liens ne mènnentpas aux pages, mais à l’acceuil.

Bien sûr j’ai fait cela de façon intuitive, sans m’appuyer sur vos explications, qui sont un peu nébulleuse pour moi, mais que je vais essayer d’appliquer en attendant votre réponse éventuelle...

Pour que les sous menu n’apparaissent pas, il faut décocher l’option "Afficher dans le menu" lors de l’édition d’un document.

Pour le problème de lien, je ne vois pas trop. Pourrais tu fournir le code d’appel pour le snippet dropmenu ?

je vais tacher de simplifier.

en rajoutant levelLimit=0 dans l’appel tu peux dire à dropmenu de ne pas parcourir le contenu des dossiers qu’il rencontre.

[[DropMenu?startDoc=`5` &pre=`` &post=`` &hereclass=`main_nav_active_item` &topnavClass=`main_nav_list` &levelLimit=`0` ]]<br /><br />Il faudrait que tu me dises ce qui dans mes explications te parait nébuleux pour que je tente de reformuler de façon plus intelligible.<br /><br />Si cela concerne les css ou le code d’appel de dropmenu.<br /><br /><br /><br />EDIT <br />@ guillaume<br />salut :-)<br />je pense que de décocher les cases afficher dans le menu ne soit pas approprié puisque ji_D parle de sous menu donc fais sans doute référence à des sous dossiers qu’il faudra peut-être affiché dans la navigation en fonction du parcours du visiteur.<br />Mais je te rejoins dans ta demande de précisions sur l’appel et si on pouvait avoir une url pour checker le source html et le css associé.<br /><br /><br /><br /><br /><br />

Je voulais éviter le lien, puisque mon site traite du P2P et je ne connais pas la position de votre communauté vis à vis de cela...

Mais puisque vous le demandez [lien édité]c’est ici, il s’agit là de la template non modifiée.
Pour la template modifié [lien édité]c’est ici, (je n’ai pas encore pris le temps de m’appliqué aux modifications que vous proposez...) et style.css sur la meme url pour afficher les CSS.

Merci pour votre aide

je vais regarder ton code mais si tu pouvais nous en dire sur la structure de ton arborescence dans modx afin que l’on puisse t’aider à paramétrer le dromenu selon tes besoins.

j’en profite pour un petit éclairage sur le code css que j’ai écrit plus haut.

lorsque j’écris

.mainNav li a{}

cela signifie que je souhaite définir le style de la balise "<a>" contenu dans un "<li>" lui meme contenu dans un élément dont la class est égale à "mainNav".

je te recommandais donc de réécrire en partie tes css pour coller à la sortie html de dropmenu.

Bonsoir Guillaume,

En effet le fait de décocher cette fonction permet de ne plus afficher les pages du sous menu.
En se qui conserne l’ouverture des pages, il semble que si je demande l’ouverture sur un nouvelle onglet (firefox), la bonne page s’affiche, mais si l’on fait un simple clic la page se charge sur "l’accueil".

Voilà la commade du menu :
[[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`1` &topnavClass=`topMenubar` &here=`activeLink`]]
J’ai essayé &startDoc=1 mais le menu disparait completement.

EDIT : JE viens de faire un mix de la commande que vous proposez :
[[DropMenu? &menuName=`topMenu` &startDoc=`0` &pre=`` &post=`` &hereclass=`main_nav_active_item` &topnavClass=`main_nav_list` &levelLimit=`0`]]<br />Mais cela désorganise completement le menu qui se retrouve sur deux lignes.<br /><br />L’architecture de mes menus...<br />La barre de menu pricipale (main_container) doit comporter 5 boutons, ensuite un sous menu (sub_container) qui s’afiche sur la droite du contenu qui comporte 4 boutons dont 3 dossiers, qui à leurs tour ont un menu (sub_container1)...<br /><br />Là ou ça devient nébulleux pour moi, se sont les appels du dropmenu ou je suis completement largué.<br /><br />Je viens de créé un CSS spécifique pour cette template : lien édité<br />

Effectivement, le mieux est de ne pas décocher l’option "Afficher dans le menu" mais de spécifier &levelLimit=`1`.

Je viens de regarder vite fait ton code html.
Tu as un lien qui contient un span qui lui même contient une liste. Je ne suis pas sûr que tout ça fonctionne bien, surtout avec les CSS, mais je ne suis pas un expert.

<div id="main_nav_container">
<ul id="main_nav_list">
<li id="active" class=activeLink>
<a href="#" id="current" class="main_nav_active_item">
<span class="main_nav_item_text">
<ul class="topMenubar">
<li><a href="index.php?id=1" title="">L’accueil</a></li>
<li><a href="index.php?id=7" title="inscription">inscription</a></li>
<li><a href="index.php?id=2" title="tous ce qu’il faut savoir sur Shareaza est là !">Base de connaissances</a></li>
<li><a href="index.php?id=3" title="tests des ports">les tests</a></li>

<li class="last"><a href="index.php?id=4" title="téléchargez shareaza">téléchargement</a></li>
</ul>

</span>
</a>
</li>
</ul>
</div>

Pour faire disparaire les cercle à côté des liens, tu peux ajouter le code suivant dans ton fichier css :

Le span est là normalement pour formater le texte du bouton sur la template d’origine, mais là il ne format rien du tout.
Merci pour le code.

Bon j’avance, en tout cas merci à vous deux pour le coup de main :jap: