Mettre en place un menu responsive avec les CSS

Tester sur un véritable périphérique

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les tests en navigateur ou en émulateur sont de plus en plus performants et proches de la réalité. Néanmoins, il est fortement conseillé de toujours tester sur de véritables périphériques.
06:30

Transcription

Comme nous l'avons vu, tout fonctionne très bien dans le navigateur et, même si on passe en mode d'inspection ici et qu'on demande de travailler sur une émulation d'un périphérique, je vais passer sur un modèle iPad Portrait, on me demande de recharger. Vous voyez, je recharge et bien que tout soit rechargé, tout soit activé, ici ma partie de menu n'est pas basculée en burger alors que je suis en mode Portrait donc je devrais vraiment être avec l'icône burger. Ici il y a une petite problématique du HTML qui est que le navigateur, qui en l’occurrence maintenant se trouve être un iPad, dit moi écoutez il n'y a pas de souci, j'ai une matrice dans le retina qui me permet d'afficher, ne vous inquiétez pas, un grand nombre de pixels donc vos 800 pixels je peux les afficher, il n'y a pas de souci à ce niveau-là. Ce qu'on va faire, on va forcer le périphérique à s'adapter aux feuilles de style que l'on a proposées et ici on va utiliser notamment la balise viewport ici dans laquelle on va pouvoir venir définir déjà que la largeur du contenu est égale à la largeur du device. À ce moment-là notre device lui qu'est-ce qu'il va faire ? il va adapter le contenu. J'enregistre cette page déjà ici. J'actualise ma page. Qu'est-ce qui se passe ? oui effectivement là maintenant le device est contrôlé par le contenu et donc on est bien On va aller un peu plus loin au niveau de la balise viewport, c'est-à-dire qu'on va lui dire attention, je ne veux pas que l'utilisateur puisse zoomer également donc je reviens sur cette partie-là et je lui dis attention, pas de possibilité de mettre à l'échelle par l'utilisateur et surtout, au moment où tu vas chercher ta page, si déjà l'utilisateur avait zoomé au préalable, on va revenir sur un zoom initial étant à 1 donc, à ce moment-là, je sais que l'utilisateur ne peut pas zoomer et ne pourra pas modifier. Si je regarde maintenant sur le périphérique, ça fonctionne bien, parfait et ici, au niveau du contenu, le contenu s'est bien calé ici, tout fonctionne à peu près normalement sauf que je dis à peu près. Je suis passé sur Dreamweaver ici volontairement. Je vais enregistrer tout ça et cette fois-ci je vais utiliser une possibilité de Dreamweaver qui est de me dire grâce à ce code-là, je vais pouvoir basculer maintenant sur un véritable périphérique et en temps réel suivre ce qui se passe. J'appelle ce périphérique. Il est là, voilà, parfait ! par contre cette fois-ci je ne navigue plus à la souris, je navigue sur le périphérique et vous voyez que je peux venir naviguer sur mon périphérique, tout fonctionne normalement ! sauf que, quand je vais cliquer sur la petite bannière de logo, ça s'ouvre et rappelez-vous nous ce qu'on a demandé c'est au body de basculer tout le monde or, à l'extérieur, tous ces éléments qui sont en train de flotter les uns après les autres ne sont pas vus par le body et là-dessus il va me falloir venir sur mon code CSS et forcer, lorsque je suis en navigation ouverte ici, d'avoir un overflow visible, c'est-à-dire le voir, Ctrl + S, de façon à lui dire que je veux forcer le rafraîchissement de mon contenu et donc, dès que je bascule ici, si j'ouvre mon élément, vous voyez qu'à ce moment-là mon contenu est bien visible, il n'y a pas de souci là-dessus. Par contre si je navigue ici, vous voyez, il n'y a plus rien qui navigue. Là j'essaye de naviguer et c'est tout bloqué, vraiment c'est impossible de pouvoir naviguer sur ce contenu. Là encore une fois il va falloir que je revienne sur la partie de mon code et lui dire, quand je suis en navOpen, donc quand la signature de mon body est en navOpen, la partie main, la partie qui va servir de conteneur au contenu, je vais demander de recalculer sa hauteur à 100 % et lui dire attention, force bien ce main à se mettre et surtout autorise son overflow-y ici. Là je ne suis pas dans un compass, une fonctionnalité, je suis dans du pur CSS et je vais lui dire ici autorise le scroll. Je le force à autoriser le scroll. Quand je rebascule sur mon élément, ma page se recharge, je force la page à se recharger au cas où. Là ça a été fait mais au cas où je le force. Vous voyez, ici je peux bien naviguer, il n'y a pas de souci. à naviguer sauf que maintenant tout s'est décalé. Effectivement les histoires de positions fixed etc ne sont pas gérées de la même manière par les périphériques et donc vous pourrez trouver diverses alternatives pour pouvoir demander à ce texte de ne pas s'afficher sur la partie de navigation. Il y a plusieurs possibilités de faire, moi la possibilité qui me convient le mieux dans ce genre de fonctionnalité c'est de retourner vers mon header ici et lui dire qu'il a un z-index directement de valeur 2000 pour le placer vraiment au-dessus de tout. Faites bien attention quand vous jouez avec les z-index parce que vous pouvez avoir des interfaces beaucoup plus compliquées que ce qu'on a là pour l'instant et vous vous retrouvez avec un z-index qui passerait au-dessus de tout le monde et donc faites attention de le laisser quand même dans la limite des éléments. Et là, vous voyez, si j'ouvre mon élément, quand je navigue j'ai plus cette problématique de survol d'élément donc tout ça c'est parfait ! Ce qu'on peut également demander de faire, ça peut aider sur certains types de périphériques, c'est au header ici de venir repositionner en fixed, de le réaffirmer de manière explicite pour qu'il n'y ait pas d'héritage qui se fasse avec les media screen parce que certains media imbriqués peuvent causer ce type de souci. Là on n'avait pas ce souci n'importe comment mais vous pouvez rebloquer votre navigation en position fixed à ce niveau-là. Encore une fois, tout ça pour vous dire qu'il est important de tester dans les navigateurs ou dans les émulateurs aussi, les navigateurs et émulateurs, mais il est important de tester dans la vraie vie, sur les vrais périphériques et de continuellement demander à vos bêta-testeurs de vérifier si toutes les fonctionnalités que vous avez apportées permettent d'être prises en compte. N'oublions pas quand même que nous sommes dans un cas particulier ici où on n'a pas touché au HTML, on est resté dans une structure extrêmement propre et elle n'est pas venue polluer par des extra balises, histoire de pouvoir accrocher du contenu. Des fois, si vous ne voulez pas vous prendre la tête, rajoutez des extra balises autour, ça ne gênera en rien, ça restera quand même du code très propre mais, si vous devez être amené à travailler sur un site sur lequel vous ne pouvez pas toucher la structure, vous voyez que toutes les possibilités existent, il faut juste les prendre en considération au niveau de nos CSS. Quand j'ouvre mon contenu, ça s'ouvre et je peux continuer

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 !