Un menu pour mobile avec MODX

Publié le par

Avec la généralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille réduite de leur affichage lors de la conception de votre site. Un élément essentiel du design d’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ée (<ul>) + css par une liste déroulante (<select>) et du JavaScript.

Menu pour smartphone

Comment faire avec MODx

De nombreux sites propulsés par MODx, dont le mien, utilisent le snippet WayFinder pour générer leur menu. Utiliser WayFinder ? Mais il ne génère que des listes non ordonnées ! me diriez-vous. Et je vous dirais que vous avez tort. En effet, il est possible de formater ce que génère WayFinder à l’aide de templates, tout comme vos propres snippets.

Formater ce que génère WayFinder

Pour formater le rendu, WayFinder prend en compte quatre paramètres:

  • &outerTpl : est utilisé pour le conteneur du menu
  • &rowTpl : est utilisé pour les liens de premier niveau
  • &innerTpl : est utilisé pour les conteneurs de deuxième (ou plus) niveau
  • &innerRowTpl : est utilisé pour les liens de deuxième (ou plus) niveau

Pour que ce soit plus clair, voici un menu « classique » sur lequel j’ai indiqué les niveaux auxquels je fais allusion ci-dessus:

<ul>
    <li class="first active"><a href="#">Accueil</a></li>
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Catégorie 1</a><!-- lien de premier niveau -->
        <ul><!-- conteneur de deuxième niveau -->
            <li class="first"><a href="#">Lien 1</a></li><!-- lien de deuxième niveau -->
            <li><a href="#">Lien 2</a></li><!-- lien de deuxième niveau -->
            <li class="last"><a href="#">Lien 3</a></li><!-- lien de deuxième niveau -->
        </ul>
    </li>
    <li><a href="#">Catégorie 2</a><!-- lien de premier niveau -->
        <ul><!-- conteneur de deuxième niveau -->
            <li class="first"><a href="#">Lien 1</a></li><!-- lien de deuxième niveau -->
        </ul>
    </li>
    <li class="last"><a href="#">Catégorie 3</a><!-- lien de premier niveau -->
        <ul><!-- conteneur de deuxième niveau -->
            <li class="first"><a href="#">Lien 1</a></li><!-- lien de deuxième niveau -->
        </ul>
    </li>
</ul>

Premier template : outerTpl

<!-- outerTpl -->
<select id="port-menu">
    <option selected="selected">Menu</option>
    [[+wf.wrapper]]
</select>

Ce que nous voyons ici est tout simple la base de notre <select>. Le placeholder [[+wf.wrapper]] est là pour indiquer à WayFinder où placer la suite de ce qu’il génère.

Deuxième template : rowTpl

<!-- rowTpl -->
[[+wf.linktext]]
[[+wf.wrapper]]

[[wf.docid]] correspond à l’ID de la ressource, [[wf.linktext]] correspond au titre de la ressource. Notez bien la présence de [[+wf.wrapper]] en dehors de l’<option>.

Troisième template : innerTpl

<!-- innerTpl -->
[[+wf.wrapper]]

Ce template est vide, car pour une liste déroulante, les niveaux inférieurs au premier n’ont pas besoin de conteneur.

Quatrième et dernier template : innerRowTpl

<!-- innerRowTpl -->
> [[+wf.linktext]]
[[+wf.wrapper]]

Ce template est identique à rowTpl à l’exception du > rajouté devant le titre.

Utiliser les templates avec WayFinder

Après avoir enregistrer les différents templates dans des chunks, il suffit de faire appal à WayFinder avec les paramètres indiqués plus tôt: [[Wayfinder? &startId=`0` &outerTpl=`outerTpl` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]].

Laisser un commentaire