Menu multiniveau animé avec WayFinder, GetField, jQuery...

826 Posts

marc Reply #1, 16 years, 7 months ago

Grand mère que je salut au passage faisait la remarque d’utiliser les onglets pour faire un menu.

Je vous propose de bâtir un menu dynamique avec quelques snippets livrés avec Modx.

Un menu complexe : Imaginons un premier menu horizontal dont le code serait identique à celui-ci :

<div id="mnu_p"><!-- Menu Principal -->
  <ul>
    <li><a class="menuitem" href="/site/accueil.html" title="Accueil">Accueil</a></li>
    <li><a class="menuitem" href="/site/entreprise.html" title="Entreprise">Entreprise</a></li>
    <li><a class="menuitem" href="/site/produits.html" title="Catalogue">Nos produits</a></li>
    <li><a class="menuitem" href="/site/agence.html" title="Nuanciers">Nos agences</a></li>
    <li><a class="menuitem" href="/site/partenaires.html" title="Partenaire">Partenaires</a></li>
    <li><a class="menuitem" href="/site/Contact.html" title="Contact">Contact</a></li>
  </ul>
</div>  <!-- Menu Principal -->

Un fichier CSS classique :

#mnu_p {
	float: left;
	width: 228px;
...
	font-size: 16px;
	list-style-type:none;
	background: none; /* correction d'un bug IE */
}
#mnu_p li{
	margin-top: 12px;
	list-style-type:none;
	font-weight: bold;
}
#mnu_p li a{text-decoration:none;}
#mnu_p li a:hover{color: #3A3A3A;}

Générer ce type de menu ne pose aucun problème avec WAYFINDER.
Cela se complique si on ajoute un menu secondaire sur plusieurs niveaux (4 par exemple)dans une autre partie de la page donc indépendant du menu principal.
Pour compliqué d’avantage, imaginons que vous avez créer (ou souhaitez le faire) un site multilangue. Vous avez donc créé l’arborescence suivante :

> fr
> Accueil
> Entreprise
> Historique
> Notre savoir faire
> Nos produits
> Tables
> Style ancien
> Louis Philippe
> Louis XVI
> ...
> Moderne
> ...
> Commodes
> ...
> Savoir faire
> ...
> en
> Home
> Company
> ...

Pourtant si la page située au quatrième niveau (Louis Philippe) est active, il serait intéressant de mettre en gras le titre (Nos produits) dans le menu principal.

Je poste pour le moment.
J’ai une urgence à traiter. Je reviens pour la suite et la solution de cette première contrainte.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #2, 16 years, 7 months ago

Comme je l’indiquais nous allons utilisé plusieurs techniques (snippets) pour gérer notre menu principal.
Le premier est WAYFINDER qui utilise plusieurs "chunk" :

Créer le chunk "mnpOuter" :

<div id="mnu_p"><!-- Menu Principal -->
  <ul>
    [+wf.wrapper+]
  </ul>
</div>  <!-- Menu Principal -->

Jusque là c’est simple. Nous retrouvons notre structure. Pas besoin d’explication, suffit d’aller voir la doc de WAYFINDER.

Créer le chunk "mnpRow" :

    <li><a class="[+phx:if=`[[GetField? &docid=`[[UltimateParent? &topLevel=`2`]]` &field=`pagetitle`]]`:is=`[+wf.title+]`:then=`activemenu`:else=`menuitem`+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

Là c’est plus compliqué.
Un peu d’explication s’impose :

Pour afficher une ligne avec WAYFINDER nous avons besoins de ce code :

    <li><a class="menuitem`" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

et pour la ligne active (Nos produits dans notre exemple) :

    <li><a class="activemenu" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

Pour afficher l’une ou des lignes, il nous faut connaître si la page affichée est une fille ou non de notre titre dans le menu.
Pour cela nous allons utiliser 3 snippets imbriqués les uns dans les autres :
- UltimateParent permet d’obtenir ID du document Parent le plus haut dans l’arborescence (fr) puis il redescend les niveaux en fonction du paramètre &topLevel=`2` (ici 2 niveaux nous avons donc l’ID de la page "Nos Produits")
- GetField renvoie le contenu du champs indiqué dans le paramètre &field (ici `pagetitle` soit "Louis Philippe" dans notre exemple) pour l’ID du document transmis par le paramètre &docid (ici l’id obtenu par UltimateParent précédemment)
- Enfin PHX permet de conditionner le résultat : si (if) GetField renvoie (is) le même titre que le titre de la ligne alors (then) "activemenu" sinon (else) "menuitem"

Voilà notre menu principal est en place et il prend en compte notre arborescence du site.

Nous pouvons ajouter un autre chunk "mnpRowHere" pour l’affichage de la page titre si besoin :

    <li><a class="activemenu" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

et un autre chnuk "mnp_parentRowActif" qui servira pour lorsque le menu secondaire sera construit :

    <li class="activemenu"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

enfin pour activer WAYFINDER :

 [!Wayfinder? &startId=`[[UltimateParent? &startID=`[*id*]`]]` &level=`1` &lastClass=`` &outerTpl=`mnpOuter` &rowTpl=`mnpRow` &hereTpl=`mnpRowHere` &parentRowTpl=`mnp_parentRowActif` !]

La aussi j’utilise UltimateParent pour prendre en compte que notre site est mulitilangue.

Reste à construire notre menu secondaire qui je le rappelle se trouve sur une autre partie du site par exemple sur une colonne à gauche ou à droite.
Je vous donnerai la suite un peu plus tard wink

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #3, 16 years, 7 months ago

Pour la construction du Menu secondaire, c’est plus classique :

Créer le chunk "mnsOuter"

<div id="mnu_s"><!-- Menu Secondaire-->
   <ul>
      [+wf.wrapper+]
   </ul>
</div>  <!-- /Menu Secondaire-->

Le chunk mnsRow pour les lignes de niveau 1

<li class="menuitem"><a class="headNiv[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Le chunk mnsRowHere pour la ligne de niveau 1 active

 <li class="activemenu"><a class="headNiv[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Pour les lignes inférieures, le chunk "mns_innerTpl" :

<ul class="subMenu">
   [+wf.wrapper+]
</ul>

le chunk "mns_innerRowTpl" :

<li class="submnuitem"><a class="headNiv[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

le chunk "mns_innerRowHere" :

<li class="submnuitemhere"><a class="headNiv[+wf.attributes+]" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Enfin le chunk "mns_parentRowActif" :

<li class="activemenu"><a class="headNiv[+wf.attributes+] selected" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Le code pour activer le menu :

 [!Wayfinder? &startId=`[[UltimateParent? &startID=`[*id*]` &topLevel=`2`]]` &level=`4` &lastClass=`` &outerTpl=`mnsOuter` &rowTpl=`mnsRow` &activeParentRowTpl=`mns_parentRowActif` &hereTpl=`mnsRowHere` &innerTpl=`mns_innerTpl` &innerRowTpl=`mns_innerRowTpl` &innerHereTpl=`mns_innerRowHere`!]

Voilà notre menu secondaire est opérationnel

Une précision, pour la suite de ce tuto j’ai utilisé le champ "Attributs des liens" dans le document pour définir le niveau dans le menu.
Il sera utile pour l’animation jQuery.

Je poste pour le moment.
Je donnerai la suite un peu plus tard (Animation jQuery)

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #4, 16 years, 7 months ago

Pour faire les animations AJAX, personnellement j’utilise jQuery.

J’ai recherché sur le net un plugin qui permettait de gérer le multi-niveau dans un menu.
J’en ai trouvé un que j’ai modifié pour qu’il accepte de tourner sur la dernière version de jQuery.
Ce plugin se nomme ’accordion.js’.

Pour l’activer, il suffit de mettre le code js suivant dans les balises <HEAD> du template :

    <!-- JQuery /accordion -->
	<script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="assets/js/accordion.js"></script>
	<script type="text/javascript">
		// <![CDATA[
		$(document).ready(function(){	
			// applying the settings
			if($('#mnu_s').length!=0&&$('.subMenu').length!=0){
				$('#mnu_s').Accordion({
					 active: 'a.selected'
					,header: 'a.headNiv1'
					,alwaysOpen: false
					,animated: true
					,showSpeed: 1000
					,hideSpeed: 800
					,event: "mouseover"
				});
				$('.subMenu').Accordion({
					 active: 'a.selected'
					,header: 'a.headNiv2'
					,alwaysOpen: true
					,animated: true
					,showSpeed: 400
					,hideSpeed: 800
					,event: "mouseover"
				});
				$('.subMenu').Accordion({
					 active: 'a.selected'
					,header: 'a.headNiv3'
					,alwaysOpen: true
					,animated: true
					,showSpeed: 400
					,hideSpeed: 800
					,event: "mouseover"
				});
				$('.subMenu').Accordion({
					 active: 'a.selected'
					,header: 'a.headNiv4'
					,alwaysOpen: true
					,animated: true
					,showSpeed: 400
					,hideSpeed: 800
					,event: "mouseover"
				});
			}
		});				
		// ]]>
	</script>

Vous trouverez le plugin ’accordion’ en pièce jointe.

Si vous parcourez le code du plugin vous verrez qu’il a besoin du paramètre headNiv suivi d’un chiffre qui correspond au niveau.
Ceci permet le réglage niveau par niveau.
Une autre technique consiste à utiliser le paramétre headNiv seulement (modifier le code js et les codes dans les chunk en conséquence).
Dans ce cas, mettre en commentaire les lignes ’,event: "mouseover"’.
Cette dernière ligne permet de parcourir le menu par simple survol de la souris. Si elle est en commentaire il faudra utiliser un premier clic pour parcourir le menu, un deuxième clic ou un double-clic pour ouvrir la page.

Et voila le tour est joué.
A vous d’adapter tous ces codes pour le faire fonctionner sur vos site.
Bon courage.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

826 Posts

marc Reply #5, 16 years, 7 months ago

Pour terminer ce post, je vous indique le site pour lequel j’ai mis en oeuvre ces menus.
Le site est encore en cours de développement : il sera prochainement en ligne et remplacera le site actuel.

Voici l’adresse :
Pour la version française : Mac
Pour la version anglaise : Mac

N’hésitez pas à me donner votre avis ainsi que remonter les erreurs notamment dans la traduction anglaise.
L’école est loin...

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink