Mettre en place un menu responsive avec les CSS

Modifier des paramètres

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lorsque vous avez terminé, assurez-vous que les paramètres de présentation soient facilement modifiables. Vérifiez aussi la cohérence du site et de son contenu pour qu'il ne soit pas remis en question.
03:36

Transcription

Quelle que soit l'application que l'on mette en place, quel que soit le type de contenu sur lequel on travaille, et quel que soit le périphérique de destination, il faut toujours garder à l'esprit la possibilité de modifier, d'intervenir très rapidement sur notre code, donc de le garder le plus évolutif possible et de le garder le plus modifiable possible, donc, en modifiant quelques propriétés, de pouvoir rapidement changer l'application. Alors ici, on a 2 types d'évolution qu'on peut avoir, c'est, par exemple, des évolutions purement visuelles, c'est-à-dire se dire, ici, le burger est mis à gauche du logo depuis le début, depuis qu'on travaille sur ce type d'application, mais en fait, sur beaucoup d'applications et beaucoup de mobiles, il se trouve à droite. Donc il faudrait pouvoir modifier très rapidement cela, il suffit d'aller dans la partie burger ici, et de dire qu'au lieu d'être sur du left, on va être sur du right, et le tour est joué. Encore une fois, comme on n'avait pas pris en compte la marge ici, rappelez-vous, c'était la largeur du burger qui positionnait le logo un peu plus loin, le logo va se caler. Donc ici, dès que calé pile poil parce qu'il n'avait pas de padding. Donc si tous les éléments sont bien calés eux-mêmes par rapport à l'environnement dans lequel ils sont, ne vous inquiétez pas, ça ne bougera pas. Voyez, c'est comme le cas du burger ici, sa largeur de 36 pixels qu'on avait prise au tout début me le décale du bord droit. Donc il y a des modifications aussi simples que ça, mais il peut y avoir des modifications plus compliquées par exemple si, ici, je venais changer le html mais que dans la partie html, je rajoute, par exemple, deux liens : lien 6, lien 7, lien 8, à ce moment-là, dès que je vais actualiser ma page, lien 7 et lien 8 apparaissent, parce que, vous vous rappelez quand on disait : top pour aller le caler. Donc ça, c'est le genre de truc que je n'aime pas trop, je l'ai intégré dans le code pour vous montrer que c'est quand même gérable, bien qu'il faille qu'il y ait une sorte de dépendance qui soit très forte entre le scss ici et le html, mais c'est quelque chose qu'on va pouvoir prendre en considération tout simplement en créant une variable, et donc cette variable je vais l'appeler nb-menu par exemple, et je vais la mettre égale à 8 puisque maintenant on a 8 menus, et ce nb-menu, il va falloir que je le reporte maintenant dans les parties où il est utilisé, donc ici il était utilisé pour le positionnement de la nav en partie top, c'est à dire en fonction du nombre de menus, et puis ici le navOpen qui, lui, me faisait descendre l'intégralité du body pour ouvrir le menu. Et donc ici vous voyez que, quand j'actualise ma page, on a bien l'ensemble des menus qui a disparu et quand j'ouvre, on a bien tous nos menus qui apparaissent sans souci. Bien entendu, cette dépendance peut être très dure quelque part, donc il va falloir en tenir compte dans le html, dès qu'il y a une modification lourde, sachez que les menus ne vont pas bouger énormément de ce côté-là, mais voyez qu'il faut en tenir compte. Alors ce qui peut être fait aussi, c'est de dire, je vais créer un navOpen et créer une sous-classe qui serait 7, 8, 9 etc... et de façon à faire un span différent ici sur ces interfaces-là. Donc on pourrait créer plusieurs classes un peu comme un mode grille le fait, là on pourrait anticiper ce genre de fonctionnalités-là, détecter par un JavaScript le html et automatiquement appliquer à la volée la classe qui va bien. Donc sachez que tout est complètement envisageable mais regardez, ce qui est important à prendre en compte c'est que si je mets ici par exemple un 50 pixels pour les menus hauts, ici j'actualise ma page rien n'a bougé à ce niveau-là voyez, et quand j'ouvre, on a bien des menus qui font 50 pixels qui s'ouvrent, le calage est pile poil au pixel près, donc ce qui est important, c'est de se dire que cette dépendance, maintenant, va être uniquement liée au nombre de boutons et pas à quelque chose de plus complexe à venir modifier un peu partout dans notre fichier. cale-toi sur la partie top, ici, on faisait 6 fois la partie

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 !