Mettre en place un menu responsive avec les CSS

Adapter les CSS pour l'illustration du menu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Commencez par présenter le menu dans sa version écran large. Puis, fixez quelques règles d'utilisabilité. Pensez à ajouter du contenu pour suivre l'adaptation en fonction des écrans et des contextes d'utilisation.
07:28

Transcription

Je vous propose que l'on décompose la mise en place des CSS en trois parties : une première partie qui va gérer la barre de navigation en écran large, une seconde phase qui décomposera le mouvement entre la barre de navigation et la partie Burger et puis en troisième partie on développera l'interaction propre aux appareils mobiles. Commençons déjà par nous rapprocher de notre fichier HTML et lions-lui une feuille de style de CSS. Il va se trouver en CSS en dessous, 02-02, le chapitre Point l'étape ici, voilà, et on va pouvoir venir dans cette partie-là coder notre CSS. Première chose, comme dans beaucoup de projets, on va donner une hauteur de 100% à notre body et notre balise HTML afin de nous assurer que tous les conteneurs prennent pleinement cette hauteur en compte et puis maintenant, plutôt précisément au niveau du body, je vous propose qu'on rajoute un font-size. Là vous jouez en fonction de vos propres projets, soit vous travaillez sur du font-size 100 % en faisant confiance au navigateur avec des valeurs par défaut soit vous utilisez 62.5 % pour revenir sur des valeurs décimales si vous utilisez une proportionnelle comme le m soit vous définissez une font-size brute de décoffrage. Moi ce que je vais utiliser ici ça va être un font-size 100 % et du coup, dans la foulée, on va partir sur un line-height ici qui pourrait être un 150 %, histoire de vraiment dégager la lisibilité de nos paragraphes. Ça c'est pas du tout propre à la barre de navigation, c'est juste pour avoir un confort de lecture au moment du débogage. Ici on va rentrer sur le header et là, au niveau du header, ce que je vous propose que l'on ait, c'est d'avoir une barre fixe qui va rester dans la partie haute de l'écran, qui va utiliser toute la largeur de façon à afficher le logo et les éléments de navigation sur la même ligne, dans une barre fixe qui restera continuellement accessible, quelque soit la navigation dans le site. Pour cela on va utiliser un position : fixed ici. On va bloquer le top à 0, le left à 0 et le right à 0. On va garder le bottom sur sa hauteur et, pour ça justement, on va mettre une hauteur. Je vous propose 40 pixels, vous pouvez mettre ce que vous voulez, 80 pixels, 60 pixels, tout va dépendre de votre logo, de votre header, de votre barre de navigation. Pour cet exemple-là, le height va être bon et ce qu'on va faire pour pouvoir centrer tous les éléments dans la partie médiane, regardez si j'enregistre ici et que je viens actualiser dans cette partie-là, on a bien notre barre ici. Pour mieux le voir, on va rajouter une couleur d'arrière-plan, on va mettre Je vous propose un ♯888, ça donne un gris un peu soutenu et, pour pouvoir mieux lire les éléments, on va mettre un color qui serait lui par contre un ♯CCC, ça sera très bien, un gris clair. Ici, si l'on vient visualiser dans la partie du navigateur, le logo, vous voyez, qui est un élément ici, n'est pas centré dans cette barre-là. L'astuce pour le centrer c'est de donner un main-height qui va faire la hauteur de cet élément-là. Pour pouvoir garder ça, je vais créer une variable. Dès l'instant où vous utilisez deux fois la même valeur et que vous savez que les deux sont en référence l'une de l'autre, pensez à de suite variabiliser vos éléments. Ici on va pouvoir l'appeler bando haut par exemple, la hauteur de bando, on va dire 40 pixels, voilà. Je récupère ce bando, petite coquille au passage, ici. Je le place en height et en line-height ici je vais pouvoir revenir mettre la même valeur et vous voyez que, dès qu'on va passer dans notre navigateur, qu'on actualise, le logo se centre de manière automatique sur la partie médiane. Justement, pour maintenant faire flotter tous ces éléments-là, il va nous falloir retourner dans la partie HTML cette fois-ci, venir ajouter une classe à notre élément logo ici pour pouvoir le pointer. Certains préfèrent des id, d'autres des classes, d'autres d'utiliser directement des attributs et de faire un filtre CSS d'attributs pour le récupérer. Là c'est libre à vous, vous voyez comme vous voulez le travailler. Peu importe le ciblage que vous allez utiliser, le résultat sera le même en fonction de vos flux de travail. Ici justement le logo, ce qu'on va faire c'est demander d'entrée de jeu d'avoir un font-size qui pourrait être de 1.3 em histoire de le grossir un tantinet, le rendre un peu plus visible et puis d'avoir un float : left ici, histoire de demander à tous les éléments qui vont suivre le logo de pouvoir flotter à la suite de cet élément et donc, si je viens maintenant dans la partie du navigateur ici et que j'actualise, on voit bien que le logo s'est un peu grossi et que tous les éléments flottent à la suite de cet élément. Après vous pouvez jouer avec les marges etc, ça c'est vous qui voyez, c'est de la fioriture. On va rester concentré vraiment sur la fonctionnalité et la mécanique de cette barre de navigation. Juste un petit détail quand même ça va être sur les éléments de décoration. Ici ce qu'on va faire c'est demander un text-decoration: none ici et on va demander d'avoir une couleur inherit histoire de ne pas avoir de couleur bleue par défaut de ces liens. On va récupérer la couleur du parent pour pouvoir colorer les liens. Ici on va actualiser notre page. Moi ça me convient bien. Qu'est-ce qu'on pourrait faire ? On pourrait réinitialiser un peu l'intégralité de ces marges et paddings que l'on va avoir ici et pour cela, puisqu'on est dans compass, ici on va utiliser un import "compass" et on va demander de faire un include global-reset qui va nous permettre de réinitialiser toutes les valeurs par défaut, toutes les marges par défaut et là, regardez ce qui va se passer, c'est que dès que j'actualise tout ça, vous voyez que les marges n'existent plus et tout le contenu du main passe derrière le lien parce que n'oublions pas que, lui flottant, ça l'a fait sortir du flux et tout passe à l'arrière-boutique. Ce qu'on va regarder, au niveau de notre balise main ici, je vais venir on va demander à ce que dans la balise main on ait un padding ici donc on va prendre un padding direct. On va dire que, dans la partie haute, on va mettre la hauteur du bando. Si vous voulez ajouter une petite valeur, vous pouvez venir ajouter ici bando + x pixels, on va rester en brut de décoffrage. Sur la partie droite on va lui dire qu'il n'y a pas de padding à avoir. Sur la partie basse de décoller et un 20px sur la gauche également pour décoller, ce qui fait que maintenant, quand on va regarder tout ça dans le navigateur, on va s'apercevoir que par défaut on a bien notre titre de contenu qui est positionné dans la hauteur de ce bando et puis, une fois qu'on va jouer, il va venir passer par l'arrière de cette barre de navigation donc moi ça me va très bien comme ça. Prenez soin, si vous le souhaitez, de venir écarter un peu tous ces éléments-là, de les dispatcher sous forme de bouton mais ça ne gênera en rien la suite de l'étape si vous ne le faites pas.

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 !