Mettre en place un menu responsive avec les CSS

Finaliser et suivre l'interaction

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez intégrer la navigation au clavier et obtenir une meilleure prise en compte de l'accessibilité. Vous allez devoir vous tourner du côté de JavaScript pour compléter les manques de HTML et CSS.
10:05

Transcription

Si le menu réagit bien au survol de la souris ici, il n'en va pas de même avec la touche Tab qui ne fait qu'activer les premiers niveaux de menu mais pas les sous-menus, et donc n'ouvre pas ces sous-menus, ne leur donne pas accès. On va devoir modifier un petit peu le script qui a été utilisé jusqu'à présent. Si on regarde du côté du css ici, on se retrouve avec un hover qui permet de détecter le survol du menu, mais en aucun cas ça va détecter le focus. Donc pour cela on va agir en deux temps. On va ajouter premièrement un JavaScript qui va modifier cet état de hover ici, au travers d'une classe qu'on va pouvoir ajouter à l'élément pour la détecter. Donc le hovering ne fera qu'ajouter retirer la classe qui prendra la place de cette détection survol au niveau de css, de cette pseudo classe css. De cette façon on pourra ré-ajouter la classe également par l'élément de focus ici que l'on pourrait avoir sur ces éléments internes. Donc dès l'instant où on va ouvrir cet élément-là, on va pouvoir également affecter le focus par ces éléments-là. Le plus simple c'est de le mettre en application de le regarder une fois construit. Donc ici premier élément on va déjà utiliser jquery comme à l'accoutumée parce que ça va nous permettre d'aller plus vite en besoin au niveau des sélections, au niveau du travail sur le javascript, et de vraiment se focaliser au niveau de notre fonctionnalité. Et là donc on va lier un nouveau script 14.js Cet élément de JavaScript ici on va demander de faire un (document) . ready et une fois que notre document sera chargé, on va jouer sur cet évènementiel de survol. Ce que je vous propose de faire dans un premier temps c'est de mémoriser une variable qui va nous être très utile, cette variable va être de concocter un tableau vers un $ par exemple menuitem. Je vais copier les 2 roles pour aller plus vite, je vais faire un Copy ici, et au niveau du JavaScript je vais écrire un $ je vais placer mon premier role, alors prenons soin quand même de parler d'attribut ici. Ici je vais fermer cette attribution, ici maintenant, on va dire que l'on a un deuxième attribut qui va être premier enfant de l'élément. Ici ce tableau menu va contenir les 3 éléments de navigation c'est à dire les 3 menuitem qui vont être premier enfant de menubar. Et donc on va pouvoir appliquer à cette variable menus un hovering donc une fonction hover tout simplement propre à jquery, qui consiste en 2 parties, la première partie c'est lorsque la souris va rentrer sur l'élément, et la deuxième partie quand la souris va sortir de l'élément. Ce que l'on n'a qu'à faire, c'est de dire : on va faire un $(this) ici avec un .addClass et la classe on va pouvoir utiliser par exemple ( 'actif ' ), ça pourrait être très bien. Et là maintenant au niveau de la seconde partie on va lui dire un $(this) ce qu'on va faire, c'est un .removeClass et dans ce .removeClass, je vais prendre le dernier, ça sera toujours la classe ( 'actif ' ). Alors cette classe ( 'actif ' ) n'existe pas en soi, elle peut être complètement virtualisée, puisqu'en fait ça va être un pointeur qui va dire je suis actif ou je ne suis pas actif. À ce moment-là on va pouvoir venir remplacer directement le hover ici par un .actif ctrlS tout devrait fonctionner maintenant. Je vais prendre soin d'enregistrer mon html pour être sûr de prendre en compte les liens vers les javascript, j'actualise ma page et une fois la page actualisée voilà, je survole, les éléments vont bien fonctionner, cette fois-ci par contre ce n'est pas détecté par le pseudo hover que l'on a dans les css, mais par la fonction hover propre à jquery qui permet d'alterner le résultat. Bien entendu les tabulations ne fonctionnent toujours pas. Il va me falloir maintenant ajouter, au niveau de ces tabulations, la prise en compte du focus. Alors il me manque un petit élément pour cela. Je vais fabriquer une seconde variable et je vais venir appeler cette variable menuitem par exemple, seulement attention ce ne sont pas tous les menuitem de ma page, ce sont simplement les balises ' a ', que l'on va avoir dans menus. C'est à dire que ce que je regarde ici j'ai menu, moi ce qui m'intéresse ce sont tous les menuitem, toutes les balises a qui se trouvent à l'intérieur de cet élément-là. Et donc tous ces éléments-là ont besoin de prendre le focus. Donc pour cela je vais rajouter ici sur menuitem, cet objet menuitem, un objet tableau, je vais rajouter le focus, au niveau du focus la fonction que je vais utiliser ça va être de dire que $(this) sur l'élément qui chope ce focus, son premier parent ( ' li ' ) qui va l'encapsuler, qui va l'englober va ajouter sa classe ( 'actif ' ), par contre ce qui va se passer, c'est que il faut que tous les frères éventuels qui pourraient être sélectionnés comme lui retirent cette classe. Je vous propose de les garder à ce niveau-là voilà, comme ça je vais pouvoir faire un addClass pour être plus lisible, et là faire un .siblings ici, donc tous les frères de type ( ' li ' ) éventuellement qui auraient la classe ( 'actif ' ), je vais les .removeClass, et là je vais retrouver la classe ( 'actif ' ). Si j'enregistre maintenant ici et que je bascule dans le navigateur pour aller visualiser ce qui se passe, regardez là cette fois-ci les survols fonctionnent bien au niveau des survols, il n'y a pas de souci. Et au niveau de la tabulation, on a bien l'élément qui fonctionne et rappelez- vous, on avait fait avec des tabulations key on avait justement inversé tous ces éléments d'accord ? On voit bien que la tabulation fonctionne. Bien sûr si je fais shift+tab, c'est-à-dire je fais marche arrière, je reviens bien sur la manœuvre arrière de ma navigation. Alors nous pourrions nous arrêter là, mais si on regarde sur le site de mozilla, dans les différents Etats et propriétés, on a la propriété aria-selected qui va correspondre avec une valeur true ou false à l'élément en cours de sélection. On va pouvoir directement ici suivre cette partie-là, regardez ici si j'inspecte au niveau des éléments, donc ici on va venir inspecter par exemple cet élément-là, ici pour l'instant il n'y a aucune information comme quoi l'élément a été sélectionné. On va venir l'ajouter dans le javascript, et pour cela on va simplement dire avant de travailler avec le parent li, avant d'attraper son parent on va simplement ajouter un attribut et donc on va jouer sur l'attribut ( ' aria-selected ' ), et on va dire qu'il prend la valeur true parce que ça sera l'élément true. attr( ' aria-selected' , ' true ' ) Donc là l'élément va bien se sélectionner, on peut le vérifier directement dans le navigateur, donc ici je recharge ma page. Et on va aller voir sur l'élément ici, vous voyez bien que aria-selected est égal à true on le voit bien, puisqu'il y a eu le focus sur cet élément-là. Donc si je viens sur le 2, si je viens sur le 1, le 3 etc, on va pouvoir comme ça avoir toute cette interaction qui va pouvoir se passer. Le problème, c'est que vous voyez, ici celui-là s'est mis selected mais l'autre ne s'est pas désactivé. Il y a déjà 2 petites choses que l'on va pouvoir faire. La première est de dire au départ tous les menuitem doivent avoir l'attribut. Alors je vais le copier ici ça ira plus vite, ctrl+C. Dehors l'attribut ( 'aria-selected ' ) mais cette fois-ci sur ' false ' parce que dès le départ aucun n'est sélectionné. Donc ça fait que tous mes menuitem auront le focus, mais en plus auront l'attribut aria-selected qui leur incombe qui est false. Et ce qu'il va me falloir faire, c'est de m'assurer, au moment où j'ai le focus qui va rentrer sur un élément, je vais dire $ tous les éléments dont l'attribut aria-selected="true" je vais leur dire de prendre leur attribut ( 'aria-selected' , ' false ' ). Donc je vais désactiver, je vais copier cette partie-là, ça ira plus vite. Si maintenant je re-actualise ma page dans le navigateur et que je charge à nouveau, je vais utiliser le clavier. Regardez on voit bien que aria-selected est false, je vais me mettre sur le menu ici, voyez aria-selected="true" c'est bien l'élément. Si je continue à tabuler c'est bien le second qui passe. Alors si je prends le second ici qui est masqué on voit bien que le aria-selected est true ici, si je continue, voilà, je vais pouvoir comme ça naviguer entre tous mes éléments et pouvoir faire basculer l'état sélectionné de manière accessible. Donc toutes les applications éditrices d'écran ou qui vont gérer de l'accessibilité vont pouvoir être informées de cette mise en sélection de l'élément de menu. Le travail de fond de la mise à l'accessibilité d'un menu responsive va être quelque chose d'extrêmement fastidieux, verbeux, il va falloir reprendre toutes les fonctionnalités que l'on a par nos css, par notre aperçu visuel de la navigation, il va falloir pouvoir le rendre, informatiquement parlant, explicite, détaillé, de façon à pouvoir interagir de manière ad-hoc avec nos applications, et ce quel que soit le lecteur, quel que soit le navigateur et quelle que soit la manière de naviguer de l'utilisateur. Alors on va en rester là au niveau de la navigation et de l'intégration de l'accessibilité au sein de notre menu de navigation, mais il était important d'ouvrir la porte à cette dimension pour mieux comprendre comment nos menus doivent s'articuler, comment nos menus doivent être construits et on va le voir notamment avec l'utilisation de librairies, de pouvoir mieux choisir la librairie adhoc si la mise en avant de l'accessibilité est quand même une raison majeure de notre cahier des charges.

Mettre en place un menu responsive avec les CSS

Mettez en place des menus responsives au sein de vos pages web. Abordez les diverses approches possibles, que ce soit avec les plug-ins, ou en codant depuis une page blanche.

2h31 (28 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 nov. 2015

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !