Mettre en place un menu responsive avec les CSS

Ajouter un visuel

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'ensemble des éléments structurels et les attributs accessibles sont mis en place. Vous pouvez maintenant ajouter le visuel CSS de manière classique et traditionnelle.
05:43

Transcription

Bien que nous allons garder à l'esprit que nous développons dans un sens d'accessibilité, commençons déjà par mettre du CSS bien visuel pour pouvoir commencer à dessiner l'esquisse de ce menu. Ici on va lier une feuille de style CSS. On va toujours faire appel à Compass et profiter pour réinitialiser toutes les valeurs par défaut du navigateur hôte. Ensuite on va pouvoir se focaliser sur notre balise a puisque ce a quand même, n'oublions pas qu'il contient une décoration que l'on va supprimer, et on va passer à une couleur inherit pour s'assurer que le lien possèdera toujours la couleur du parent qui l'héberge. On donne à nos li une largeur par défaut de 140, ce sera très bien donc on va faire width: 140px Donc ça ça n'a rien à voir avec l'approche que l'on va pouvoir donner à notre barre de menu mais déjà au moins on s'écarte de certaines valeurs par défaut. Ici on avait toujours notre nav role de navigation on aime bien cette idée, donc on pourrait déjà tout coder pour notre composant ici avec cet élément-là. On peut utiliser également le aria-label ici Menu principal, là aucun intérêt pour nous dans cette première approche, mais on va dire que pour le développement d'une page traditionnelle, ça pourrait nous donner quelque chose de propre et d'isolé, on va vraiment cibler cette barre de navigation donc on pourrait utiliser tout simplement ce premier sélecteur comme signature de travail pour cette barre de navigation. De cette façon on va pouvoir maintenant travailler de manière beaucoup plus simple et dire que tout le role="menubar", ici on se trouve où ? Donc je vais tabuler quand même cet élément-là pour l'indenter. Donc si je regarde au niveau de mon HTML ici, je me retrouve à ce niveau-là, j'aurais très bien pu d'entrée de jeu dire role="menubar" et travailler sur cette barre-là. Cela aurait très bien fonctionné du fait qu'on n'a qu'une seule barre de navigation. C'est certain que si on a plusieurs barres de navigation au sein de ma page, il va falloir s'assurer de cet élément-là. Et n'oubliez pas qu'on peut surcharger la signature par un second attribut qui serait l'aria-label="Menu principal" pour être sur un peu comme un identifiant cette fois-ci accessible pour pouvoir travailler sur cette barre et cette barre uniquement. Donc je voulais déjà commencer à signer ma barre par des filtres d'attributs pour ne plus forcément tomber dans la classite aigüe, l'idea à outrance etc. Donc ici tous les éléments comment va-t-on les positionner ? On peut travailler un peu comme on veut, donc je vais dire que tous les éléments de li qui sont de premier niveau de premier enfant de menubar donc les 3 menus principaux, vont avoir un float: left ici, très bien moi ça me va. Ensuite on va leur donner un background-color: #494949 C'est une sorte d'ocre très sombre et donc donner une color:#e7E7E7, qui va être cette fois-ci plutôt quelque chose d'assez clair, un gris clair. Et donc si on vient simplement regarder ce que l'on a fait à ce niveau-là au sein du navigateur, si on actualise, on a tous nos éléments qui se sont bien affichés, nos liens ont hérité des couleurs parentales, donc c'est très bien. Dans ce premier sens on a tous nos sous-menus qui sont affichés et on va pouvoir d'entrée de jeu venir les inverser. On est dans des ul de second niveau, parce que n'oublions pas que l'on est déjà à l'intérieur du ul ici par role menubar, donc on va se trouver uniquement dans les ul. il faudrait dire attention, ce sont mes premiers ul au sein de ce li, on pourrait se placer à l'intérieur du li, ça serait très bien. Pour éviter d'avoir des règles un peu abracadabrantes, je le laisse à l'extérieur ici. Et d'entrée de jeu par contre je vais dire que là j'ai des li, et ces li je vais inverser les couleurs, c'est à dire que je vais utiliser les couleurs de fond et les couleurs d'arrière-plan inversées par rapport au li précédent. Si j'actualise ma page, on se trouve bien avec des menus en couleur inversée. Et vous avez vu que les a, puisqu'ils ont un inherit, prennent la couleur du li sans souci à ce niveau-là. Alors maintenant on va quand même demander de faire un display:none de ces éléments, de ne pas les afficher. Il suffit de faire un display:none pour ne pas les voir, et puis tout simplement de venir sur un li &:hover par exemple ici, donc de faire un direct, de demander un display :block. Là ce n'est pas le li &:hover que je veux voir apparaître, c'est le li ul d'accord ? C'est ce fameux ul que je viens de masquer pour le faire apparaître. Donc si je re-bascule maintenant dans ma page d'aperçu, je n'ai plus rien, par contre dès que je survole on voit bien que les éléments apparaissent. Par contre je n'ai aucune navigation à la touche Tab, vous voyez je viens de tabuler rien ne se passe, il n'y a que le survol qui fonctionne et donc il va falloir prendre en compte maintenant cette possibilité-là de dire attention, ce n'est pas seulement avec la souris que je veux pouvoir naviguer , c'est également au clavier, et pour cela on va devoir passer par du javascript, ajouter une particularité JavaScript à notre code. Au niveau du premier ul, Alors faites attention, si vous avez des sous-sous-menus,

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 !