Mettre en place un menu responsive avec les CSS

Explorer les méga menus

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En approfondissant le développement de la coquille de vos méga menus, il peut être intéressant de mutualiser plusieurs informations pour assouplir la maintenance et l'évolutivité.
07:15

Transcription

Alors pour aller plus loin, bien qu'on ait déjà compris la mécanique à mettre en place, on va surtout regarder comment on peut mutualiser des contenus d'utilisation au niveau des css. Disons que par exemple dans le Menu Median, on souhaite faire une galerie d'images avec des images qui sont numérotées visions-1, visions-2 etc. Pour cela on va se placer encore une fois à l'intérieur du Menu Median, on va venir créer une classe qui serait donc .menumedian et puis on va rentrer des images, ces images on va leur donner un attribut src=../ pour se retrouver dans le dossier images/visions, on a dit que toutes les images s'appelaient visions-quelque chose, donc je vais mettre $ ici parce qu'il y aura un multiplicateur .png donc on va pouvoir sortir. On peut penser également à placer un attribut alt. Si vous générez de manière automatique c'est là où c'est intéressant de venir gérer ce genre d'élément-là. Ici on ne va pas en placer un, mais c'est là où vous pourriez passer de manière dynamique continue, et puis on va multiplier par 6, puisqu'on a 6 images. Là pareil que tout à l'heure, je vais copier cette abréviation de façon à pouvoir la placer directement dans les codes commentés ici, pour les récupérer Voilà donc ici on a bien nos 6 images qui vont apparaître, si j'enregistre cet élément-là parfait. Je vais passer ici dans la partie. Qu'est-ce qu'on a besoin de faire ? On a besoin de venir définir, je vais copier cette partie-là. Et là je vais dire que cette fois-ci ce n'est pas .menularge mais .menumedian Au lieu d'avoir une largeur de 800, cette fois-ci on pourrait avoir une simple largeur de 490, 500 ... c'est à vous de voir. Là les images font 163, donc on va rester sur quelque chose d'à peu près sympa par rapport au 30 pixels de padding. Si j'actualise ma page on va avoir un tout petit souci au niveau des images. Ah les images ne sont pas rechargées. Mais oui on n'a pas le déclencheur, je réalise que je n'ai pas mis le déclencheur ici. Il suffit que je récupère la classe .menularge, et dire je veux également attaquer le .menumedian voilà Ctrl+S. J'aime bien formater ici pour avoir une meilleure lisibilité de code, ça ne changera rien au fonctionnement, mais c'est un peu plus propre au niveau de la lisibilité ici. J'actualise ma page. Ce qui va être intéressant de venir faire, c'est de redéfinir nos images au niveau css. Je vais dans la partie basse au même stade qu'on avait redéfini par défaut nos ancres a et nos balises li. Ce que je vais demander c'est d'avoir un padding: 0 plus un margin: 0 pour mes images. Je vais en profiter pour leur demander d'avoir un display: block et dernier élément je vais leur demander de faire une flottaison left pour bien centrer les unes à côté des autres dans cette représentation du menu. Alors on actualise la page ici. Et voilà nos images sont apparues. Donc on peut placer de l'image, on peut passer du coding. On pourrait tout aussi bien avoir un menu de type traditionnel ici, on n'est pas obligé d'avoir que des Mega Menus parce qu'on va travailler dans du Mega Menu. Qu'est-ce qu'on pourrait avoir ? On pourrait tout simplement avoir dans notre html une simple classe ul li a href tout simple avec des liens etc. Donc ici on va avoir ul de classe .menunormal Qu'est-ce qu'il va contenir ? Un certain nombre de li, ces éléments li pourront contenir du a href classique sauf que ici on va garder un # on n'est pas obligé de le mettre parce que les abrévations vont les remplir automatiquement, mais par contre on pourrait mettre comme contenu au sein de ce lien un Lien 0$ ici ou même $$ directement pour pouvoir le prendre en compte. Et on va demander d'avoir par exemple 4 liens comme ça qui vont pouvoir se générer. Une fois encore on copie cet élément, on vient le coller ici dans le commentaire pour le récupérer ultérieurement et là donc on a simplement un ul class="menunormal" qui contient tout un certain nombre de liens. On va retourner maintenant du coté du css. Alors j'enregistre cette partie-là. On va venir cloner la partie .menularge .menumedian .menunormal Cette fois-ci .menunormal on va lui faire une largeur qui pourrait être de 130 classiquement on a nos li qui sont pré-formatés ici dans la partie donc on n'a pas besoin de revenir dessus, et il faut simplement réactiver ici .menunormal pour déclencher au niveau du hover. On bascule dans le navigateur, on actualise notre page, et on a bien différents types d'éléments de menu utilisés sous des formes de Mega Menu. Alors que même une mutualisation qui peut être faite, c'est qu'on s'aperçoit que tous au départ, hormis le width ici, retrouvent tous une position absolute, retrouvent tous un left, un background-color, un padding etc qui est commun. Donc à ce niveau-là on peut créer une sorte de holder, une sorte de conteneur pour gérer nos panneaux, de façon à mutualiser nos panneaux et toute la représentation de nos panneaux qui va être faite de quoi ? De cette position : absolute et ensuite de ces background-color ici. Donc ces éléments-là on va pouvoir les supprimer de toutes les parties ici. On va simplement garder les largeurs. Par contre il va falloir faire ce qu'on appelle un extend, un héritage de ces holder ici, on va faire @extend %panneaux Donc on va demander de faire une extension, un héritage de ces classes-là qu'il nous faut raccrocher de chacun de nos éléments. Et maintenant quand je vais enregistrer, si je vais tester dans le navigateur, ça fonctionne exactement pareil, à la différence maintenant que tous les panneaux fonctionnent exactement pareil sur une seule directive. Modifions cette directive ici, si on change le padding et qu'on le mette à 10 pixels, je reviens à 10 pixels de padding, quand je vais me retrouver maintenant dans mon élément ici, tous les éléments ont 10 pixels de padding, puisque ça a été mis en place par classe héritée, partagée qui va nous permettre donc de pouvoir être beaucoup plus optimal au niveau de la mutualisation de notre code. Ici je vais passer à 30 et je reviens. Donc les Mega Menus sont ni plus ni moins des menus traditionnels, sauf que dans la partie imbriquée, au lieu d'utiliser simplement des éléments de liste, comme on le ferait pour tous les menus, on utilise d'autres types de conteneur pour pouvoir placer tout type de contenu. Et maintenant quand je survole Menu Median on a bien nos images.

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 !