Mettre en place un menu responsive avec les CSS

Rendre le méga menu responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois les méga menus mis en place, il est important d'aborder l'aspect responsive. Il s'agit de garantir et de préserver leur lisibilité sur un appareil mobile. Explorez une piste alternative à celle qui a été mise en place précédemment.
06:02

Transcription

Tout est adapté et fonctionne pour le mieux maintenant depuis le navigateur, sauf que lorsque l'on passe dans une version un peu réduite de la largeur comme une tablette à mode portée, on se retrouve avec nos menus principaux déjà qui passent sur plusieurs lignes et puis nos Mega Menus qui vont sortir, qui vont dépasser. Alors là il faut adapter pour le mobile on pourrait utiliser toujours pareil l'approche du burger, puis ouvrir avoir un menu un peu particulier, un peu adapté au contexte. Ce qu'il faut comprendre, c'est que dès lors que l'on va travailler avec des Mega Menus il va falloir adapter plutôt à une approche qui va consister à masquer les Mega Menus, et puis à voir tous les menus de manière verticale les uns sous les autres et puis ouvrir les fenêtres un peu comme on le ferait avec un accordéon. Alors sans réinventer l'accordéon, la manière la plus rapide et la plus simple de pouvoir adapter le css que l'on a mis en place pour l'instant, ça va être de déjà ajouter une sorte de mega query autour de cette approche menu ici. Donc on va dire que simplement les navigateurs qui vont avoir une largeur minimum de 801 pour être donc au dessus de l'élément, ici on va prendre jusqu'à cette partie-là, donc on va garder la partie a li img qui étaient des éléments propres au css comme on l'avait développé précédemment. On va les garder toujours pareil mutualisés entre les 2 environnements. On va rajouter maintenant une requête qui va prendre en compte tous les media screen qui vont être inférieurs à 800 donc avec un maximum de largeur égale à 800. Si on actualise notre page ctrl+S ici à ce niveau-là on se retrouve avec tous les contenus les uns après les autres de manière verticale. Alors bien entendu on peut vérifier que dès qu'on va être supérieur, notre Mega Menu re-fonctionne mais dès qu'on va se retrouver dans une largeur d'une tablette en portrait, on n'a plus rien. Alors on va coder cette partie-là. Donc de manière commune, on va dire que pour tous les éléments qui vont être les panneaux, alors on pourrait bien entendu mutualiser l'ensemble au travers d'un holder comme on l'avait fait. ne veut pas les afficher, voilà on va faire un display : none en basculant on se retrouve qu'avec nos menus, on n'a plus toutes les parties des panneaux du Mega Menu, qui ont disparu, on les a masquées. On va ajouter donc la partie qui va nous permettre de faire apparaître ces éléments que l'on vient de masquer, on va venir sur le menu, on va s'assurer d'avoir une hauteur, là height de 40, quand même pour dégager un peu d'espace sur ces éléments qui sont un peu concaténés les uns sur les autres. On va ajouter une couleur background pour pouvoir les visualiser, ensuite on va jouer sur les li, on va demander au niveau du hover, que l'on soit sur du .menularge du .menumedian ou du .menunormal, l'idée c'est de faire un display:block pour ces éléments afin de les afficher. Petit élément qui va quand même manquer parce que n'oublions pas que ici si on visualise ctrl+S, j'actualise, ça va être le fait de pouvoir masquer tous ces éléments, voyez ici le Menu Median automatiquement n'apparaît pas, donc on va rajouter un overflow:hidden ici de façon à ce que lorsque on actualise au niveau du navigateur, on voit bien lorsqu'on est sur le Menu Median, on a bien cet élément qui englobe l'intégralité du div qui a été ouvert par ce panneau. Ce qu'on pourrait rajouter ici, c'est maintenant venir enrichir à ce niveau-là en ajoutant une couleur d'arrière-plan, donc ici une couleur grise. une largeur de 80 % et une marge pour centrer cet élément-là. On va supprimer le padding utilisé dans l'autre version, parce qu'à la limite on n'a pas besoin de ce padding puisque le margin va faire le job ici. Maintenant voilà on a nos éléments qui se survolent, donc notre élément Menu Median qui permet d'afficher. C'est vrai qu'on pourrait maintenant jouer sur les images afin de pouvoir s'assurer que la largeur des images soit responsive également, donc on pourrait tout simplement après jouer sur l'intérieur de ces Mega Menus pour les afficher, mais ça dépasse un peu le propos. Là l'intérêt est vraiment de se dire comment faire fonctionner un Mega Menu de manière responsive. Voilà chose qui est faite qui va nous permettre donc de pouvoir approcher aussi bien des menus avec la possibilité d'utiliser du burger, ou des Mega Menus un peu plus larges en utilisant un peu le principe du menu accordéon. Pour terminer cette approche, il faudrait sortir du Media query ici, et mutualiser tout ce qui est mutualisable, en s'apercevant ici que par exemple, alors pas la hauteur la couleur, ici on a bien une couleur orange et grise pour pouvoir les distinguer entre les 2 versions, mais ce sont plus des couleurs d'approche et de travail, donc ici on pourrait mutualiser, en dehors de ce menu, ici on va le faire directement. Donc dans la partie #menu on va pouvoir rajouter un line-height sur le menu et puis le background-color ici, on peut clore cet élément-là, et prendre soin d'aller les retirer ici dans la partie couleur et line-height et puis ici simplement couleur et line-height, du fait que tous ces éléments vont pouvoir être complètement centralisés. Il ne nous reste plus qu'à enregistrer, venir ici rafraichir notre navigateur, et là voyez on est bien passé dans la partie Menu Large, et si on vient dans la partie haute, on se retrouve bien avec notre fonctionnement identique puisqu'on a mutualisé tout un certain nombre d'informations entre les 2 modes d'affichage. Voilà donc pensez toujours à aller plus loin dans l'amélioration de votre aspect responsive. Peut être ne pas avoir que 2 états, peut être avoir plusieurs états en fonction d'une tablette, en fonction de certains smartphones, en fonction aussi de palette de type Kindle par exemple, de façon à toujours penser à afficher l'intégralité et de redistribuer non seulement le menu mais aussi le contenu de chacun des panneaux de ces Mega Menus. Pour l'instant ici on va dire tout simplement qu'on Comme l'élément de survol, on va pouvoir rajouter à ce niveau-là, mais au moins le line-height,

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 !