Un menu déroulant Web adapté aux smartphones et tablettes
La percée des terminaux mobiles tels que smartphones et tablettes impose de nouvelles règles en terme d'ergonomie et de webdesign spécifiques aux écrans de taille réduite.
Les menus de navigation déroulants posent de nombreux problèmes d'accessibilité dans des conditions d'usage "classique", et ceux-ci se voient décuplés dans le monde du Web mobile où la navigation verticale est à privilégier (l'affichage sous forme de colonnes côte à côte doit être prohibé sur de petits écrans).
La technologie CSS3 des Media Queries va permettre de réaliser une intégration adaptée aux écrans de petite taille en détectant deux largeurs que nous aurons définies par avance, en amont du projet (ici "moins de 1000 pixels" et "moins de 540 pixels").
Le menu déroulant présenté dans ce tutoriel dans un souci d'accessibilité : les contrastes sont suffisants, il est possible d'agrandir les polices sans "casser" le design, la navigation est possible au clavier via la touche tab et lorsque JavaScript n'est pas activé le menu prend sa forme dépliée.
En action !
Voici ci-dessous les captures d'écran des différents états du menu selon les tailles d'écran respectives.
Télécharger tous les fichiers de ce tutoriel (3 Ko)
Code HTML
La structure HTML du menu se présente, sans surprise, sous forme d'une liste non ordonnée d'éléments, parfois imbriquée lorsqu'un sous-menu doit apparaître. La liste principale "menu" est placée au sein d'un élément HTML5 nav :
<nav id="navigation" role="navigation">
<ul id="menu" role="menubar">
<li><a href="#"><span>Blog</span></a> </li>
<li class="sub"> <a href="#" role="menuitem"><span>Features</span></a>
<ul>
<li> <a href="#" role="menuitem"><span>Sub cat 1</span></a> </li>
<li> <a href="#" role="menuitem" class="current"><span>Sub cat 2</span></a> </li>
<li> <a href="#" role="menuitem"><span>Sub cat 3</span></a> </li>
</ul>
</li>
<li> <a href="#" role="menuitem" class="current"><span>Services</span></a> </li>
<li class="sub"> <a href="#" role="menuitem"><span>Archives</span></a>
<ul>
<li> <a href="#" role="menuitem"><span>Sub 1</span></a> </li>
<li> <a href="#" role="menuitem"><span>Sub 2</span></a> </li>
</ul>
</li>
<li> <a href="#" role="menuitem"><span>Contact</span></a> </li>
</ul>
</nav>
L'élément meta viewport permet de fixer la zone d'affichage ainsi que la résolution de la page à un ratio de 1:1, nous allons ajouter cette ligne au sein de l'élément head de la page HTML :
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
JavaScript
L'action de déroulement du menu est déclenchée via JavaScript : lorsque JavaScript est activé, alors un attribut class="drop" est ajouté à ul#menu. Ce qui à pour but d'activer le format déroulant du menu.
Les CSS3 Media Queries sont une aubaine pour l'adaptation d'un design aux terminaux nomade
Le menu est accessible avec la touche tab. Il est aussi possible d'utiliser la combinaison de touches CTRL + SHIFT pour prendre le focus sur le premier élément du menu. La fonction setTimeout() est utilisée pour qu'un sous menu affiché disparaisse avec un temps de retardement.
Vous retrouverez le code JavaScript en affichant la source de la page d'exemple en ligne.
CSS
Les étiquettes principales sont alignées les unes à côté des autres avec display:inline-block. Les espaces blancs indésirables (white-space) sont supprimés "en collant" les balises fermantes et ouvrantes concernés (exemple : </li><li>). Parcourez l'excellent tutoriel de CreativeJuiz pour d'avantages de solutions sur les white-space.
Le sous-menu est masqué hors de la fenêtre au départ à l'aide d'un positionnement absolu en left: -9999px;. Pas d'utilisation de display:none; ici.
Media Queries
C'est là que tout se joue ! Les CSS3 Media Queries sont une aubaine pour l'adaptation d'un design aux terminaux nomades puisqu'ils offrent la possibilité - entre autres - de détecter la résolution de la fenêtre et d'appliquer des styles CSS différents selon les cas de figure.
Nous avons choisi d'adapter le menu déroulant à trois situations différentes :
Sur écran classique (de plus de 1000px de large) : il s'agira des styles CSS classiques, appliqués par défaut.
Sur écran réduit (moins de 1000px de large) : nous avons prévu de conserver l'aspect horizontal du menu, mais en déployant par défaut les sous-sections.
Sur écran mobile (moins de 540px de large) : le menu s'affichera sur une seule colonne et ses sous-sections seront déployées.
Voici comment nous allons déclarer nos Media Queries au sein de la même feuille de styles unique :
/* ici les instructions pour écrans "classiques" (plus de 999px de large). */
@media screen and (max-width:999px) { /* ici les instructions pour écrans de moins de 999px de large. */ }
@media screen and (max-width:540px) { /* ici les instructions pour écrans de moins de 540px de large. */ }
Vous retrouverez l'intégralité du code CSS en affichant la source de la page d'exemple en ligne.
Conclusion
L'adaptation d'un design, et plus particulièrement d'un menu déroulant, aux smartphones et tablettes n'est pas une mission impossible grâce aux CSS avancées et surtout si cette adaptation a été pensée dès en amont du projet Web.
Les solutions sont d'ailleurs multiples et nous n'avons pas la prétention d'affirmer que cette approche est parfaite, elle n'est qu'une façon de répondre à divers besoins et contraintes imposées par les médias de taille réduite.
Elle a cependant le mérite d'exister et aura rempli sa mission si elle vous évite de vous arracher les cheveux et de perdre du temps sur vos projets de conception de site pour le Web mobile.
Cet article a été réalisé par aquelito (Alsacreations / Bordeaux) sous licence Creative Commons.