labs

Toggle navigation CSS only

Déterminer la meilleure façon d’optimiser la navigation d’un site web sur mobile est, depuis l’exigence du Responsive Web Design, un véritable challenge sujet à de nombreux débats. Brad Frost propose d’ailleurs un billet retraçant les avantages et désavantages des différentes solutions sérieuses qui ont pu être avancées.

Avec notamment la popularité de frameworks comme Bootstrap, et malgré le long débat toujours aussi polémique sur le “hamburger” menu, la méthode la plus considérée semble être celle du dropdown : la navigation est cachée sur mobile derrière un picto qui en permet l’accès au toucher, et se déploie complètement dans le header une fois passée le breakpoint pour desktop. Comme le souligne néanmoins Brad Frost dans son article, le soucis de cette approche est qu’elle est bien souvent dépendante de JavaScript — c’est du moins le cas lorsqu’on utilise un framework. Or, pour des raisons de performances ou d’éco-conception, il peut paraître regrettable d’avoir à faire appel à JavaScript, à jQuery, voire encore aux fichiers JavaScripts du framework (bien souvent dépendant par ailleurs de jQuery) uniquement pour un composant aussi réduit. Tout comme il peut paraître à l’inverse regrettable de se passer de cette solution ergonomique et populaire…

Bien que 90% des sites web utilisent JavaScript en 2016, il peut être intéressant, dans une démarche d’éco-conception, de commencer à s’interroger sur l’utilité d’une telle technologie pour certaines de nos pages web, de s’interroger sur l’utilité de certaines fonctionnalités au regard de ce qu’elles “coûtent” en terme de performances et d’énergie, et de commencer donc à trouver et utiliser des solutions moins gourmandes en ressources.

Voici donc une démonstration des deux principales techniques pour créer une navigation dropdown pour mobile sans JavaScript, uniquement en CSS. La première solution, proposée par Aaron Gustafson, utilise le pseudo-élément :target afin d’ouvrir le menu quand le picto de menu est ciblée. Dans la seconde solution, le hamburger menu est en fait une checkbox. Le menu correspond est affiché et masqué par le biais de son pseudo-élément :checked.

See the Pen Toggle navigation CSS only by tibomahe (@tibomahe) on CodePen.