Mettre en place un menu responsive avec les CSS

Implémenter un méga menu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les menus peuvent parfois présenter des volumes d'informations plus importants, ou tout simplement avoir recours à des présentations visuelles. Il ne s'agit que de conteneurs, donc adaptez-les à vos besoins.
07:52

Transcription

Un méga menu, c'est avant tout un menu simple dont les sous-menus sont plutôt volumineux et visuels. Alors on va directement le fabriquer ce sera beaucoup plus simple. On va créer un menu classique qui va contenir trois onglets : Menu Normal, Menu Large, Menu Median. Plaçons quelques abréviations autour de ce menu comme, par exemple, un ul menu, ul avec identifiant menu qui va contenir un élément de liste. Répartissons cet élément de liste par chacune de nos lignes, et puis englobons un simple lien ici au sein de nos menus. Ici, si j'actualise cette partie-là, je l'enregistre, je vais me retrouver avec trois menus qui vont se suivre horizontalement. Pour représenter ces éléments-là, je vous invite à passer dans le CSS directement et à venir coder. Alors on pourrait mettre un global reset pour tout annuler, on va garder certaines marges, on va simplement réinitialiser, par exemple ici, au niveau de nos liens, des éléments avec des décorations none ici pour être sûr qu'on n'en ait pas deux soulignés. On va définir une couleur qui sera du noir par défaut, ce que je vous propose de refaire également, ce sont les éléments de li ici, et tout simplement, à ces éléments de li, on va leur demander de faire un list-style, on va demander none à cet élément-là. Tout simplement. Donc une fois qu'on a rentré ces éléments par défaut, on va pouvoir venir rajouter à notre élément de menu, alors ça je vais le mettre en dessous pour ne pas que ça me gêne visuellement, on va demander à notre élément de menu ici, à notre ID Menu de prendre quelques propriétés comme par exemple une hauteur de 40 pixels et bien entendu un line-height qui va de pair de façon à pouvoir nous assurer d'avoir un centrage vertical de chacun de ces éléments de menu. On pourrait demander un background-color cette fois-ci de 90 par exemple, c'est très bien, on va faire un 90 voilà ici. On a besoin d'en rajouter à nos enfants li à l'intérieur quelques règles de positionnement, donc, par exemple, de "floater" déjà, ça serait permettre de mettre tous nos éléments de menu en ligne tout simplement, et puis de rajouter un padding, alors ce padding ici, on va pouvoir le demander de zéro dans la partie haute et basse, Et de 20 pixels dans la partie droite et gauche ici tout simplement. Donc, dès l'instant où l'on va se retrouver avec ces éléments -là, on va pouvoir prévisualiser notre barre de menu dans un navigateur et là, on se retrouve bien avec une barre menu : menu large, menu médian ici, qui présente un menu classique. Ce qu'on va faire, on va rajouter un petit hover parce que ce hover va nous permettre aussi de déclencher l'apparition des méga menus. Alors au niveau du CSS on va venir simplement rajouter à l'intérieur du li une éperluette pour dire que c'est sur l'élément parent de cet élément-là, c'est-à-dire donc c'est comme si on rajoutait un pseudo au li ici directement, et sur ce pseudo hover qu'est-ce qu'on va rajouter ? Tout simplement une mise en couleur qui va changer ici, voilà, et on pourrait demander un B0 qui va faire l'élément, alors je peux rapidement visualiser, j'actualise ma page, on a tout simplement cet élément qui se survole. Donc revenons maintenant à la partie html parce que c'est un peu là que ça va se passer. Commençons par le menu large: alors, englobons-le à l'intérieur de notre élément de liste ici, et ce que l'on va rajouter, c'est une balise div de classe menu large, on va simplement appeler les choses de manière simple pour pouvoir mieux les capter, et qu'est-ce qu'on va mettre à l'intérieur de ce menu large ? Et bien on pourrait mettre par exemple du p lorem ici et on va mettre x 2 donc je vais rajouter une parenthèse juste avant. Je vais en profiter pour copier ces directives-là, les ajouter dans un commentaire pour pouvoir réutiliser par la suite si besoin était. Voilà donc ici, dès que je vais valider ma directive je me retrouve avec une partie un peu large, ici, d'éléments. Comment gérer ce menu large ici : en fait, ce que j'ai besoin de faire, c'est dès l'instant, en passant dans le navigateur, où je vais survoler menu large, j'aimerais pouvoir voir apparaître un onglet qui contient l'ensemble de ces paragraphes. Alors il est certain que, si j'actualise ma page ici, je vois directement tout qui apparait à cet instant-là, puisque c'est à l'intérieur du li. Alors ici, je vais venir jouer dans les CSS pour planquer, quelque part, ce menu large. Directement dans le CSS, on va dire que la classe menu large ici, on va lui dire qu'on veut une position absolute ici pour planquer. Alors il y a plein de manière de procéder, ça c'en est une parmi tant d'autres, et on va dire qu'elle se trouve à left à 9999 pixels donc elle va partir sur les côtés gauches et on ne la verra pas. Ensuite, ce dont on quand va même s'assurer, c'est que, pour que cette position absolute soit respectée, ici il faut que ce soit par rapport à un parent, le premier parent positionné, et la meilleure façon de positionner un parent, c'est de faire une position relative sur le li. Maintenant, si j'actualise ma page à ce niveau-là, on a bien nos menus qui reviennent et, fait, l'intérieur en ici est parti se peu positionner un plus loin et donc ne nous gêne pas. Par contre, ce qu'il faut maintenant, c'est pouvoir le faire réapparaître au hover. Donc ici au hover, je vais as dire, attention, une..., tu c'est le trouver voilà ici, menu large, est qui loin en fait, moi ce que j'aimerais maintenant, si ça ne te dérange pas, puisque il est sorti du flux rappelons-le, la position absolute, il donc n'est plus dans notre flux ici, je vais faire un left, par exemple zéro, Je voudrais le positionner à zéro au niveau gauche, et, au niveau top, adapte-toi à ce que tu as, mets-toi en automatique à ce niveau-là. Et regardons ce qui se passe maintenant quand je viens dans le navigateur, j'ai actualisé ma page, et voilà, ici, à ce moment-là, maintenant, mon j'ai bien élément qui se positionne. Sauf qu'il se positionne dans la largeur du parent, et le parent, en faisant cette largeur-là, automatiquement tous mes textes vont défiler les uns derrière les autres. Alors retournons dans cette partie, et regardons comment incrémenter par exemple, au niveau du menu large ici, de faire un serait, wizz qui alors on est dans du large, restons dans du large, faisons par exemple 800 pixels, ça serait une grosse valeur. Actualisons notre navigateur. Et là quand je survole maintenant menu large, on se retrouve avec 800 pixels de large. Donc on a bien notre méga menu qui commence à prendre forme. Parfait. La seule chose qu'il va nous falloir faire maintenant, c'est de rajouter un background et un padding éventuellement à notre menu, afin de pouvoir lui demander d'avoir un background-color, alors pourquoi pas justement lui donner le fameux B0B0B0 puisqu'il aura la même couleur que l'arrière-plan du menu survolé, et puis on pourrait demander d'avoir un padding par exemple de 30 pixels tout court qui voilà, pourrait rester comme ça, avec un 30 pixels autour. J'actualise ma page dans le navigateur et là, cette fois-ci, quand on survole on a bien l'impression d'avoir un méga menu à ce niveau-là. Alors bien entendu, vous avez compris qu'à l'intérieur de l'élément div, ici, de notre peut html, on placer ce que l'on veut. Ici on se retrouve vraiment mêmes dans les bases de la mise en place d'un méga menu. Je vous invite à en rester là pour cette étape et de prendre une étape prochaine pour aller un peu plus loin, explorer tout ce qui peut être mis dans un méga menu, et comment on va pouvoir mutualiser un certain nombre de classes.

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 !