Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.
Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).
Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :
Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.
Sur le lien qui active la partie masquée à afficher :
- class= »link collapsed »
- role= »button »
- data-toggle= »collapse »
- href= »${descendantUrl} »
- aria-expanded= »false »
- aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »
Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.
- data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
- data-desktop-target= »${descendantUrl} »
Exemple finalisé :
|
1 2 3 4 5 6 7 8 9 |
<a tal:condition="descendantUrl" class="link collapsed" role="button" data-toggle="collapse" data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}" data-desktop-target="${descendantUrl}" href="${descendantUrl}" aria-expanded="false" aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a> |
Sur l’élément à afficher/masquer :
- class= »level${parent/getChildrenLevel} collapse »
- id= »collapseShelfSubMenuLevel2${repeat/entry/index} »
Exemple finalisé :
|
1 2 3 4 |
<ul class="level${parent/getChildrenLevel} collapse" tal:define="columns php:array_chunk(children, columnItemsLimit)" tal:repeat="column columns" id="collapseShelfSubMenuLevel2${repeat/entry/index}"> |
La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :
La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.
Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.
Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.
Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).
Exemple finalisé de notre code jQuery :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(function($){ $(document).ready(function(){ enquire.register("screen and (max-width: 767px)", { match : function() { $('.main-menu > .level1 > li > a').on('click', function(e){ $(this).attr('href', '#' + $(this).attr('data-mobile-target')); }); }, unmatch : function() { $('.main-menu > .level1 > li > a').each(function(e){ $(this).attr('href', $(this).attr('data-desktop-target')); }); } }); }); })(jQuery); |
Pour finir – Markup purement HTML (rendu dans le navigateur) :
Vue Mobile, second niveau fermé :
|
1 2 3 4 5 |
<div class="main-menu"> <ul class="level1"> <li> <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a> <ul id="collapseShelfSubMenuLevel20" class="level2 collapse" aria-expanded="false" style="height: 0px;"> |
Vue Desktop, second niveau fermé :
|
1 2 3 4 5 |
<div class="main-menu"> <ul class="level1"> <li class=" store-menu no-highlight"> <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a> <ul id="collapseShelfSubMenuLevel20" class="level2 collapse"> |
On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".
