Mettre en place un menu responsive avec les CSS

Tenir compte de l'aspect responsive des menus

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avant de construire votre premier menu responsive, tentez de mieux comprendre l'usage des media queries. Les menus s'affichent de manière différente en fonction de l'espace alloué aux fenêtres de navigation.
03:11

Transcription

Le principe de mise en place de menus Responsive va se baser sur les Media Queries et va présenter un affichage différent en fonction de la dimension allouée à l'écran. Ici on pourrait très bien prototyper, c'est une simple image, c'est créé, ça pourrait être du vectoriel, du bitmap, peu importe, c'est du dur. C'est simplement pour bien comprendre la mécanique d'articulation entre ces menus. On pourrait dire que le menu horizontal se présenterait sur une seule ligne de six boutons alignés puisque il y a de la place sur la dimension de l'écran. Dès l'instant où on est sur un écran médium on pourrait, pourquoi pas, envisager d'avoir deux rangées de boutons, on pourrait adapter la largeur des boutons en fonction et puis, quand on arrive sur un écran en mode portrait, smartphone, tablette etc, on pourrait très bien envisager d'avoir des menus qui font la largeur complète de l'écran et qui vont se répartir de manière verticale. Pour le mettre en place c'est extrêmement simple, on va se dire qu'on a des Media Queries qui vont décrocher à 600-601 par exemple, pensez toujours à avoir un pixel d'écart pour éviter des artefacts qui pourraient se créer si on tombe pile poil à 600 pixels. Ici, avant 600 pixels on afficherait le menu vertical, entre 601 pixels et 1060 pixels on afficherait le menu sur deux rangées avec trois largeurs et puis, au-delà de 1061, on affiche la longueur plein écran. Les dimensions de rupture ici peuvent être faites en fonction de certains ouvrages, certains tabloïds que vous allez trouver sur le web qui vous diront de manière générale les tablettes verticales font tant et les tablettes desktop etc feront tant ! Moi je vous dirais prenez votre menu, voyez ce que vous avez à placer, testez, faites des maquettes, travaillez avec vos utilisateurs pour voir à partir de quel moment vous allez décrocher et à partir de quel moment il vaut mieux présenter sous une autre forme. Une fois que vous avez fait ces éléments-là, vous allez travailler sur du CSS, ici c'est du SAS qu'on passe pour utiliser les sprites, d'avoir une seule image, mais le principe est de dire voilà dans les médias, on aurait pu marquer on liscrin par exemple and max, j'ai vraiment été au plus court pour pouvoir focaliser sur la partie changement d'image donc ici on va dire qu'en dessous de 600, avec une largeur maximum de 600 pixels, on va pouvoir placer le menu vertical. Entre 601 et 1060, on va placer le menu médium et quand on sera au-delà, avec une largeur minimum, passé c'est toujours l'opposé de ce que l'on demande là ici, largeur minimum à partir de 1061, on mettra le menu horizontal. Je suis passé dans Dreamweaver ici tout simplement parce que, tout en restant dans l'outil, je vais pouvoir visualiser, ici je vais réduire mon écran et dès que je vais basculer à 1060, vous voyez, je suis passé sur une présentation en deux lignes de largeur et voilà ici, dès que je passe en dessous de 600 pixels, je présente sur une largeur. Par contre ce sont des images qui ne sont pas du tout responsive donc ici il n'y a pas du tout d'adaptation à la largeur de l'écran. C'était juste pour pouvoir mettre en place les mécaniques et comprendre que les Média Queries vont nous permettre de pouvoir présenter des contenus différents ou des dispositions de présentations de contenus différentes en fonction des largeurs allouées à nos contenus.

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 !