Mettre en place un menu responsive avec les CSS

Comprendre l'évolution des menus

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les menus ne sont plus simplement composés d'éléments déroulants. Ils s'adaptent à tous les supports et espaces. Ils vous proposent bien plus qu'une simple arborescence : couleurs, formes, utilisabilité, et accessibilité sont au rendez vous.
04:27

Transcription

Depuis un certain nombre d'années maintenant, les menus de nos sites se sont vraiment adaptés et ils ont énormément évolué et surtout ils ont complètement modifié leur façon d'être interprétée. Regardez ici j'ai trois-quatre menus, j'ai une partie de menu statique ici dans la partie médiane. J'ai ce qu'on pourrait considérer comme étant un menu contextuel ici mais qui propose aussi toute une liste de menus puisqu'en fait tous ces éléments-là sont des accès au contenu, sont des menus quelque part et pareil sur la partie droite. Ça fait un grand nombre de parties interactives et ces parties interactives vont devoir s'adapter, vous voyez, à la largeur de l'écran pour ne pas minimiser l'espace de lecture ici, l'espace de lecture étant centré ici sur la partie médiane, mais vous avez vu que les menus se sont rétractés pour me laisser consulter plus de contenu et, si j'en ai besoin, bien entendu que je vais pouvoir ouvrir ou fermer chacun de ces éléments et, vous voyez, c'est intelligent quelque part dans la mesure où, si j'en ouvre un alors que j'en ai déjà un d'ouvert, vous voyez, ça ferme forcément celui qui a été ouvert. Les autres menus sont restés actifs pour l'instant parce qu'il y a toujours de la place mais, dès l'instant où je vais encore réduire cet espace, vous voyez qu'ils se sont transformés en icône sandwich, en icône burger. Cette icône a créé la polémique, pour/contre, on verra ça dans une autre séquence mais déjà un grand nombre de sites utilisent cette icône-là et puis aujourd'hui, lorsqu'on clique sur cet élément-là, si on a le réflexe de venir cliquer sur cet élément-là, on va s'apercevoir qu'on accède au contenu. Le contenu est complètement ouvert quand il y a des sous-menus. Tout est égrené parce qu'il faut quand même se dire que quand on va ouvrir ce type d'icône-là c'est qu'on va être sur un appareil mobile et avec le doigt il est beaucoup plus facile de faire glisser comme ça, de faire avancer l'intégralité du contenu plutôt que de devoir cliquer pour ouvrir chacun de nos menus. Bien entendu, si vous recliquez sur la partie, ça se referme. Après c'est libre à vous d'adapter l'ergonomie que vous allez souhaiter apporter à chacune de ces icônes. Ça c'est la partie Responsive, c'est-à-dire la partie qui va permettre au menu de s'adapter à la surface de l'écran qu'il va avoir en disponibilité mais ça ne va pas s'arrêter là. Regardez. Si ici je suis sur le site du Ministère de la culture et que je vais utiliser la touche de Tabulation, vous voyez que je vais pouvoir accéder à des menus qui sont cachés, accéder directement à la navigation. Je vais continuer à tabuler et vous allez voir que, dès l'instant où je vais rentrer par exemple dans la partie Actualités ici en bas ou Ministère, si je valide avec la touche Retour, j'ouvre ce menu et, si je continue à tabuler, je vais continuer à naviguer dans le menu. Ça ça va permettre à toutes les personnes soit qui n'utilisent pas la souris soit qui ont une déficience visuelle et qui vont s'adapter sur des lecteurs d'écran, de pouvoir naviguer dans les menus. Il y a plusieurs approches. Ici vous avez vu que je navigue et je valide avec la touche Entrée. Si je prends par exemple le Musée du Quai Branly maintenant, ici ça va être différent. éléments ici mais regardez : dès l'instant où je vais arriver sur des menus qui sont comme Actualités ou Musée pratique, vous voyez ici c'est pas ma souris qui les ouvre, je vais pouvoir venir naviguer à l'intérieur de ces éléments et, quand il est terminé bien sûr, je vais passer à Programmation etc et je vais pouvoir continuer à naviguer. Les menus se sont rendus accessibles. Ils proposent toujours de plus en plus de contenu et ils se sont aussi transformés en mégas menus. Si je prends par exemple ici sur le site de Tati, lorsque je vais survoler Femme, Homme ou Enfant, vous voyez que le menu devient carrément une page entière où je vais pouvoir aller faire mon marché, c'est le cas de le dire ici, où je vais pouvoir naviguer. Vous avez vu qu'ici, dans la partie droite, la publicité va changer, va bouger, pourtant je suis toujours à l'intérieur du sous-menu. Ça veut dire que ces menus-là qu'on appelle aussi mégas menus permettent d'avoir carrément des pages entières de contenu avec des animations, des vidéos et libre à nous après de pouvoir apporter le visuel que l'on souhaite au sein de ces menus. Cette formation sur les menus Responsive ne peut pas avoir la prétention d'aborder de manière exhaustive l'intégralité de la réalisation et la mise en place de ces menus mais déjà vous donner suffisamment de bases et couvrir suffisamment d'éléments, de secteurs, de parties, pour vous permettre de pouvoir soit les développer soit d'intégrer des composants déjà existants ou d'utiliser des librairies afin de pouvoir créer des menus qui correspondront à vos attentes, d'un aspect responsive, d'un aspect présentation visuelle ou d'un aspect accessibilité, bref de pouvoir doter vos sites des menus dont ils ont besoin. j'ai une partie de menu Vous voyez qu'on peut naviguer

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 !