Mettre en place un menu responsive avec les CSS

Ajouter des media queries et gérer le multisupport

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Mettez en place la bascule entre écran large et écran de taille réduite. Il s'agit d'alterner entre le menu classique et le menu burger.
08:29

Transcription

Pour commencer la bascule entre la barre de navigation ici et l'élément de Burger, ce dont il va falloir nous assurer c'est déjà quelle va être la fonctionnalité qu'on va apporter, c'est-à-dire qu'ici, quand on va masquer cet élément-là, on peut le masquer de multiples façons. La meilleure façon de le masquer va être d'anticiper l'utilisation que l'on va avoir en appareil mobile. Moi ce que je souhaiterais avoir, ici je vais rendre un espace très petit, voilà, qui va correspondre à peu près à l'appareil mobile, c'est que quand je clique sur le burger, déjà que je sois en position, il n'y a plus que le logo et le burger d'affichés, et ce que je souhaite c'est que ces boutons descendent comme ça ici en partant du haut, c'est-à-dire que quand je vais cliquer ils vont descendre pour me proposer l'ensemble des menus. On va aller coder tout cela et déjà on sait que nos éléments vont être positionnés dans la partie haute du navigateur et je sais que moi je vais pouvoir mieux les masquer ici maintenant. Pour pouvoir détecter ce masquage, ce qu'on va faire c'est qu'on va utiliser un @media only screen et on va demander un and (max-width), vous pouvez utiliser la largeur de déclenchement que vous souhaitez, ici pour cette mise en place on utilisera 800 pixels. Maintenant l'idéal c'est de venir s'assurer que l'intégralité des menus affichés ici de manière horizontale puisse être affichée juste avant la bascule. Si 800 pixels ça arriverait ici, par exemple, on couperait le menu, ça ne serait pas terrible donc il faut que vraiment vous vous assuriez que la coupure se fasse à un moment opportun en fonction d'une part de vos périphériques de lecture mais en plus par rapport à la largeur utilisée par le menu avant cette bascule. Ici on va se placer dans le header. À l'intérieur du header on va avoir la palette de navigation et, à l'intérieur de la palette de navigation, on va avoir nos éléments de menu. On va venir s'assurer déjà de leur donner un peu un aspect visuel, chose qu'on n'a pas faite dans la barre de navigation, là on va le faire pour la partie après, c'est-à-dire la partie mobile ici. Pour ça déjà, d'entrée de jeu, on va s'assurer d'avoir un display : block ici parce que nos éléments de menu à lignes vont avoir du mal à s'afficher de manière verticale. Ici on va placer notre text-align au centre pour écrire de manière plus lisible sur appareil mobile et il faudrait donner une hauteur à ces éléments. La hauteur on pourrait lui donner 30 pixels et, pour pouvoir centrer les menus, vous l'avez bien compris, on va faire un line-height qui va nous permettre de pouvoir le faire donc d'entrée de jeu, en entrant les pixels ici, on va venir le placer en partie haute et on va faire un $ menu-haut que je récupère ici puisqu'on va venir non seulement le placer en hauteur mais en plus en line-height. Voilà. De quoi on a besoin ? on a besoin de leur donner un peu des couleurs histoire d'avoir quelque chose d'à peu près présentable. En bgc, moi ce que je vais utiliser c'est une rgba d'un marron un peu transparent ici et puis on va utiliser une couleur qui pourrait être du noir plein. Après vous affinez ces éléments-là. Si maintenant j'actualise, on est vraiment en dessous de 800 pixels donc automatiquement on a bien notre bande marron qui s'est mise en place. Attention, le marron ici n'est pas marron foncé, c'est simplement que, comme il y a une transparence, le marron clair comme ça laisse transparaître la partie en arrière-plan qui est quoi, qui est cette bande grise qu'on avait ici au moment du menu de navigation. Voilà ici on est parfait. Ce qu'il faut maintenant c'est pouvoir masquer cet élément-là, l'afficher. Comme on sait qu'il va venir dans la partie haute, ce qu'on va faire c'est qu'on va dire que l'élément nav, je vais faire en position absolute, je vais lui demander d'avoir une largeur 100 % pour être sûr de bien prendre toute la largeur de mon écran et puis il va falloir que je positionne le top de cet élément en partie haute. C'est un peu tiré par les cheveux ce que je vais faire là parce que ça va demander de faire du calcul dans les CSS, on est en CSS donc ne nous en privons pas, mais comment savoir la hauteur ? je pourrais très bien le positionner à 300 ou 400 pixels en hauteur, je sais que je serai au-dessus de mes boutons. Ce serait bien sauf que, si je fais une animation, cette animation demanderait de partir de beaucoup plus haut. Moi ce que j'aimerais c'est que le bottom soit positionné pile-poil ici donc, si je mettais un bottom 0 ici, il serait faux puisque, si vous regardez bien, la hauteur serait le bottom 0 par rapport à son parent et son parent c'est forcément le header ici, il se mettrait le 0 ici donc il faudrait enlever la hauteur du header mais comme on part en sens inverse, ça serait donc l'ajouter ,+, on avait une variable qui contenait le bando-haut. Si je fais ça maintenant, effectivement mes liens se remettent à zéro. Pour pouvoir le voir ici, il faudrait faire un "-3 px" histoire de redécaler de trois pixels vers le bas pour pouvoir le voir apparaître, vous voyez, dans la partie haute ici. Vous pouvez utiliser soit une partie dans ce sens-là, c'est-à-dire utiliser un bottom 0, ou utiliser un top, ça je vais le commenter, vous pouvez le garder pour une autre approche si vous le souhaitez. Moi personnellement je vais dire le top doit être à quoi ? il doit être à la hauteur de ce menu, je l'avais ça ici, j'avais menu-haut, cette variable multipliée par le nombre de boutons que j'ai or il se trouve que, si je regarde dans mon HTML ici, j'ai six boutons puisque j'ai six liens dans cette partie-là donc je vais pouvoir lui demander de les multiplier par six. Mais, si je multiplie par six, le top va être positif donc il va me le descendre, Ctrl + S, regardez ! Ah ! J'ai oublié un point-virgule qui me cause un petit souci ! Les boutons sont bien placés alors que, si je pars à l'inverse, c'est-à-dire avec un signe négatif, j'actualise, ici je monte bien. Pour pouvoir le visualiser, on pourrait rajouter un + 1, on va faire + 10 histoire de mieux le voir, que ce soit un peu plus franc. Voilà. On voit bien qu'on on est bien calé. Ici ce que je vais faire ça pour commenter ces éléments-là et pouvoir garder cette valeur pour tester. Voilà, ici on va se retrouver avec notre élément de menu qui va être basculé. Par contre on n'a toujours pas le Burger, on va le faire apparaître. Pour cela d'abord première chose c'est venir rajouter notre élément de burger en partie frontale. On va pouvoir rajouter aussi bien une classe burger, un id burger, vous mettez comme vous voulez, toutes les approches sont bonnes, et ce qu'on va demander maintenant ici à ce burger c'est d'apparaître, je vais enregistrer la partie HTML. On va venir rajouter dans la partie header, soit par un id soit par une classe, ici directement un élément visuel donc on pourrait prendre plusieurs possibilités et on a vu qu'on avait plusieurs éléments. Moi ce que je vais utiliser c'est un background image. On avait ce background on l'avait utilisé dans une étape précédente, par contre on va pouvoir lui rajouter un display : block. Il va falloir lui rajouter la largeur, notre largeur peut être ce que vous souhaitez, moi je vais mettre en 36 pixels histoire de dégager d'ailleurs un peu parce que c'est vrai qu'il n'y a pas de padding, il n'y a pas de marging, il n'y a rien. On va mettre le float-left parce que cet élément va devoir bien accepter tout le monde à ses côtés sur la même ligne, il m'a donné une hauteur height qui sera de bando-haut histoire qu'il couvre bien toute la hauteur de ce bando ici, de cette partie. Si j'actualise j'enregistre et j'actualise, on voit bien que notre élément est venu. Vous avez remarqué au passage que j'ai fait un background-position : center center, histoire de le centrer sur ces fameux 36 pixels de large ici et de le centrer sur la partie haute qui est la hauteur bando qui correspond à 40 pixels. Voilà, ici si je regarde bien cette partie comme ça, on a bien notre menu qui apparaît à partir de 800 pixels et, à partir de 800 pixels, bingo il bascule dans notre élément de logo. Ici on va pouvoir le récupérer, en fonction de la largeur de ce contenu. Maintenant ce qu'il va nous falloir faire c'est apporter toute l'interactivité à cet élément pour que, lorsque l'on clique dessus, on puisse récupérer le menu qu'on a caché, qu'on a masqué dans la partie haute du navigateur.

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 !