{"id":382,"date":"2014-08-15T16:44:12","date_gmt":"2014-08-15T14:44:12","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=382"},"modified":"2019-04-20T17:19:21","modified_gmt":"2019-04-20T15:19:21","slug":"menu-mobile-modx","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2014\/08\/15\/menu-mobile-modx\/","title":{"rendered":"Un menu pour mobile avec MODX"},"content":{"rendered":"\n<p>Avec la g\u00e9n\u00e9ralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille r\u00e9duite de leur affichage lors de la conception de votre site. Un \u00e9l\u00e9ment essentiel du design d&rsquo;un site est le menu principal de navigation. Pour les terminaux mobiles, une des solutions est de remplacer le classique combo liste de liens non ordonn\u00e9e (<code>&lt;ul&gt;<\/code>) + css par une liste d\u00e9roulante (<code>&lt;select&gt;<\/code>) et du JavaScript.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"233\" height=\"204\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/menu-smartphone.jpg\" alt=\"Menu pour smartphone\" class=\"wp-image-391\"\/><\/figure><\/div>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Comment faire avec MODx<\/h2>\n\n\n\n<p>De nombreux sites propuls\u00e9s par MODx, dont le mien, utilisent le snippet WayFinder pour g\u00e9n\u00e9rer leur menu. <span style=\"font-style: italic;\">Utiliser WayFinder ? Mais il ne g\u00e9n\u00e8re que des listes non ordonn\u00e9es !<\/span> me diriez-vous. Et je vous dirais que vous avez tort. En effet, il est possible de formater ce que g\u00e9n\u00e8re WayFinder \u00e0 l&rsquo;aide de templates, tout comme vos propres snippets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Formater ce que g\u00e9n\u00e8re WayFinder<\/h2>\n\n\n\n<p>Pour formater le rendu, WayFinder prend en compte quatre param\u00e8tres:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&amp;outerTpl<\/code> : est utilis\u00e9 pour le conteneur du menu<\/li><li><code>&amp;rowTpl<\/code> : est utilis\u00e9 pour les liens de premier niveau<\/li><li><code>&amp;innerTpl<\/code> : est utilis\u00e9 pour les conteneurs de deuxi\u00e8me (ou plus) niveau<\/li><li><code>&amp;innerRowTpl<\/code> : est utilis\u00e9 pour les liens de deuxi\u00e8me (ou plus) niveau<\/li><\/ul>\n\n\n\n<p>Pour que ce soit plus clair, voici un menu \u00ab\u00a0classique\u00a0\u00bb sur lequel j&rsquo;ai indiqu\u00e9 les niveaux auxquels je fais allusion ci-dessus:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;ul&gt;\n    &lt;li class=&quot;first active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lien 1&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cat\u00e9gorie 1&lt;\/a&gt;&lt;!-- lien de premier niveau --&gt;\n        &lt;ul&gt;&lt;!-- conteneur de deuxi\u00e8me niveau --&gt;\n            &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot;&gt;Lien 1&lt;\/a&gt;&lt;\/li&gt;&lt;!-- lien de deuxi\u00e8me niveau --&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lien 2&lt;\/a&gt;&lt;\/li&gt;&lt;!-- lien de deuxi\u00e8me niveau --&gt;\n            &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;Lien 3&lt;\/a&gt;&lt;\/li&gt;&lt;!-- lien de deuxi\u00e8me niveau --&gt;\n        &lt;\/ul&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cat\u00e9gorie 2&lt;\/a&gt;&lt;!-- lien de premier niveau --&gt;\n        &lt;ul&gt;&lt;!-- conteneur de deuxi\u00e8me niveau --&gt;\n            &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot;&gt;Lien 1&lt;\/a&gt;&lt;\/li&gt;&lt;!-- lien de deuxi\u00e8me niveau --&gt;\n        &lt;\/ul&gt;\n    &lt;\/li&gt;\n    &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cat\u00e9gorie 3&lt;\/a&gt;&lt;!-- lien de premier niveau --&gt;\n        &lt;ul&gt;&lt;!-- conteneur de deuxi\u00e8me niveau --&gt;\n            &lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;#&quot;&gt;Lien 1&lt;\/a&gt;&lt;\/li&gt;&lt;!-- lien de deuxi\u00e8me niveau --&gt;\n        &lt;\/ul&gt;\n    &lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Premier template : outerTpl<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- outerTpl --&gt;\n&lt;select id=&quot;port-menu&quot;&gt;\n    &lt;option selected=&quot;selected&quot;&gt;Menu&lt;\/option&gt;\n    &#x5B;&#x5B;+wf.wrapper]]\n&lt;\/select&gt;\n<\/pre><\/div>\n\n\n<p>Ce que nous voyons ici est tout simple la base de notre <code>&lt;select&gt;<\/code>. Le placeholder <code>[[+wf.wrapper]]<\/code> est l\u00e0 pour indiquer \u00e0 WayFinder o\u00f9 placer la suite de ce qu&rsquo;il g\u00e9n\u00e8re.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deuxi\u00e8me template : rowTpl<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- rowTpl --&gt;\n&#x5B;&#x5B;+wf.linktext]]\n&#x5B;&#x5B;+wf.wrapper]]\n<\/pre><\/div>\n\n\n<p><code>[[wf.docid]]<\/code> correspond \u00e0 l&rsquo;ID de la ressource, <code>[[wf.linktext]]<\/code> correspond au titre de la ressource. Notez bien la pr\u00e9sence de <code>[[+wf.wrapper]]<\/code> en dehors de l&rsquo;<code>&lt;option&gt;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Troisi\u00e8me template : innerTpl<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- innerTpl --&gt;\n&#x5B;&#x5B;+wf.wrapper]]\n<\/pre><\/div>\n\n\n<p>Ce template est vide, car pour une liste d\u00e9roulante, les niveaux inf\u00e9rieurs au premier n&rsquo;ont pas besoin de conteneur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quatri\u00e8me et dernier template : innerRowTpl<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- innerRowTpl --&gt;\n&gt; &#x5B;&#x5B;+wf.linktext]]\n&#x5B;&#x5B;+wf.wrapper]]\n<\/pre><\/div>\n\n\n<p>Ce template est identique \u00e0 rowTpl \u00e0 l&rsquo;exception du &gt; rajout\u00e9 devant le titre.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser les templates avec WayFinder<\/h2>\n\n\n\n<p>Apr\u00e8s avoir enregistrer les diff\u00e9rents templates dans des chunks, il suffit de faire appal \u00e0 WayFinder avec les param\u00e8tres indiqu\u00e9s plus t\u00f4t: <code>[[Wayfinder? &amp;startId=`0` &amp;outerTpl=`outerTpl` &amp;rowTpl=`rowTpl` &amp;innerTpl=`innerTpl` &amp;innerRowTpl=`innerRowTpl`]]<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avec la g\u00e9n\u00e9ralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille r\u00e9duite de leur affichage lors de la conception de votre site. Un \u00e9l\u00e9ment essentiel du design d&rsquo;un site est le menu principal &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2014\/08\/15\/menu-mobile-modx\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19,3,26],"tags":[36,31,25,24,37,38],"class_list":["post-382","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","category-modx","tag-chunk","tag-javascript","tag-jquery","tag-modx","tag-template","tag-wayfinder"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-6a","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":314,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/03\/30\/pourquoi-choisir-modx\/","url_meta":{"origin":382,"position":0},"title":"Pourquoi choisir MODX ?","author":"geekc","date":"30\/03\/2014","format":false,"excerpt":"Comme je l'ai annonc\u00e9 dans l'article pr\u00e9c\u00e9dent, j'ai choisis d'utiliser MODX pour mon site. Dans cet article je vais vous pr\u00e9senter MODX et vous dire ce qui me l'a fait choisir. Pr\u00e9sentation de MODX MODX est un syt\u00e8me de gestion de contenu (Content Management System en anglais) qui existe depuis\u2026","rel":"","context":"Dans &quot;MODX&quot;","block_context":{"text":"MODX","link":"https:\/\/geekcommunicant.com\/blog\/category\/modx\/"},"img":{"alt_text":"Arbre de ressources MODX","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/arbre_de_ressources.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":249,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/28\/looking-for\/","url_meta":{"origin":382,"position":1},"title":"Looking for&#8230;","author":"geekc","date":"28\/08\/2013","format":false,"excerpt":"La nouvelle viens de tomber, mon CDD de webmaster ne donnera pas de suite. Je suis donc \u00e0 nouveau sur le march\u00e9, et suis \u00e0 la recherche d'un nouveau poste de \u00ab webmaster++ \u00bb. Par \u00ab webmaster++ \u00bb j'entend que je sais un peu plus que simplement mettre \u00e0 jour\u2026","rel":"","context":"Dans &quot;Divers&quot;","block_context":{"text":"Divers","link":"https:\/\/geekcommunicant.com\/blog\/category\/divers\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":417,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/09\/07\/multi-site-modx\/","url_meta":{"origin":382,"position":2},"title":"Le multi-site avec MODX","author":"geekc","date":"07\/09\/2014","format":false,"excerpt":"Gr\u00e2ce \u00e0 son syst\u00e8me de contextes, MODX Revolution permet la gestion de plusieurs sites \u00e0 partir de la m\u00eame installation du syst\u00e8me. Nous allons voir dans cet article comment faire. Le syst\u00e8me de contextes Ce syst\u00e8me permet de clairement s\u00e9parer les ressources dans leur arbres (voir image ci-dessous). La premi\u00e8re\u2026","rel":"","context":"Dans &quot;MODX&quot;","block_context":{"text":"MODX","link":"https:\/\/geekcommunicant.com\/blog\/category\/modx\/"},"img":{"alt_text":"Options contexte","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/options-contextes.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/options-contextes.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/options-contextes.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":370,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/07\/07\/ajouter-meta-generator-modx-revolution\/","url_meta":{"origin":382,"position":3},"title":"Ajouter une m\u00e9ta \u00ab\u00a0generator\u00a0\u00bb \u00e0 MODX Revolution","author":"geekc","date":"07\/07\/2014","format":false,"excerpt":"J'ai longtemps cherch\u00e9 \u00e0 rajouter la balise m\u00e9ta \"generator\" \u00e0 mon MODX Revolution, et en fouillant la foisonnante doc de MODX j'ai enfin trouv\u00e9 une solution. Ma solution utilise un snippet (pour aller chercher le num\u00e9ro de version), et un chunk (pour mettre le tout en HTML). Le snippet Le\u2026","rel":"","context":"Dans &quot;MODX&quot;","block_context":{"text":"MODX","link":"https:\/\/geekcommunicant.com\/blog\/category\/modx\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/03\/26\/le-site-nouveau-est-arrive\/","url_meta":{"origin":382,"position":4},"title":"Le site nouveau est arriv\u00e9 !!!","author":"geekc","date":"26\/03\/2014","format":false,"excerpt":"Bon OK, si vous \u00eates all\u00e9s le voir, vous ne constaterez aucun changement, et c'est normal ! La nouveaut\u00e9 n'est ni dans le contenu, ni dans la forme, mais sous le capot. En effet, jusqu'\u00e0 pr\u00e9sent mon site n'avait aucun CMS - sauf bien entendu ce blog ici pr\u00e9sent qui\u2026","rel":"","context":"Dans &quot;Divers&quot;","block_context":{"text":"Divers","link":"https:\/\/geekcommunicant.com\/blog\/category\/divers\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":972,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/11\/25\/10-ans\/","url_meta":{"origin":382,"position":5},"title":"10 ans","author":"geekc","date":"25\/11\/2022","format":false,"excerpt":"Voil\u00e0 maintenant 10 ans que ce site existe (\u00e0 quelques mois pr\u00e8s, toujours mieux que pour la vraie naissance du Geek Communicant). Il est temps de faire un bilan de ces 10 derni\u00e8res ann\u00e9es. La cr\u00e9ation du site J\u2019ai cr\u00e9\u00e9 ce site en septembre 2012, pour avoir un endroit vraiment\u2026","rel":"","context":"Dans &quot;Divers&quot;","block_context":{"text":"Divers","link":"https:\/\/geekcommunicant.com\/blog\/category\/divers\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}