Mettre en place un menu responsive avec les CSS

Afficher l'icône Burger

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'icône Burger peut être représenté de diverses manières. Tout va alors dépendre du principe iconographique mis en place pour le reste du site. L'une ou l'autre de ces manières sera toujours performante et adaptée.
09:40

Transcription

Pour mettre en place et surtout représenter l'icône du burger, on a plusieurs alternatives, plusieurs possibilités. Ici je vais directement coder cette abréviation de Emmet afin de gagner du temps pour rapidement créer quelques menus qu'on va utiliser. Ce qu'il est bon de savoir c'est qu'aucune de ces possibilités n'est mieux que l'autre, tout va dépendre du flux de travail, de votre approche. Si vous avez par exemple des sprites, ce sera plus simple d'utiliser une icône de plus dans le sprite. Si vous utilisez une font icône, autant utiliser directement une iconographie de font. Voilà, on va aller les voir un peu dans le désordre. Les premières manières vont être d'intégrer directement une image du burger au sein de notre code. La manière la plus dans le mouvement du web actuel va être de faire du SVG. Pour ça il suffit de créer, dans un outil comme Illustrator, des blocs vectoriels, trois petites barres, et puis dans Illustrator on peut faire directement un Enregistrer sous au format SVG. Bien entendu le format SVG n'est pas bien compliqué à ce niveau-là. Il s'agit tout simplement, au sein de la balise SVG, de trois rectangles qui ont 18 pixels de large et 3 pixels de hauteur pour pouvoir représenter ces éléments dans l'espace. C'est vraiment quelque chose de compliqué. Au niveau du code, on peut directement s'appuyer sur une source d'image qui peut être au format SVG et faire un img src pointant vers le burger pour pouvoir représenter l'image. Si on enregistre et qu'on se place au sein directement d'un navigateur, on va pouvoir visualiser notre élément. Ici on en profite pour voir que justement tous les liens sont en ligne et ce que l'on va faire c'est, d'entrée de jeu, rajouter dans notre code CSS un a display : block qui va nous permettre ainsi de pouvoir placer tous les éléments de liens sous forme de blocs. Cependant, si on ajoute un lien vers la feuille de style CSS, cela permettra de mieux faire le job attendu. Nous avons notre icône qui est au format SVG et qui va se mettre juste devant notre élément. Bien entendu on va pouvoir faire la même chose avec du PNG, du JPEG, peu importe. Si vous faites du PNG, faites attention à ce genre de diffraction d'image, là c'est un peu volontaire pour le montrer. Pensez à bien vous assurer qu'il n'y ait pas de demi-transparence entre les blocs et puis surtout de gérer cet arrière-plan c'est-à-dire que si vous êtes sur fond bleu, sur fond vert, comment voulez-vous gérer l'interstice entre les deux blocs noirs. Est-ce que ça sera une couleur transparente ou est-ce que vous allez utiliser une couleur blanche par défaut ? Pensez à ce genre de détail. Ici pareil, pour intégrer une image PNG il suffit de pouvoir la basculer directement et vous voyez que ça se présente pareil. Ici la diffraction, vous voyez cette sorte de petite chaleur entre les deux barres alors qu'on ne l'a pas sur du SVG qui est bien net au niveau de la rupture. Qui dit format d'image dit également images en base 64 qui peuvent être également intégrées mais cette fois-ci qui vont éviter une requête client-serveur. Là j'ai choisi un site en ligne quelconque qui utilise une conversion à partir d'un format image fournie et là, vous voyez, vous pouvez récupérer le base 64 directement au sein de votre code. Vous pouvez l'utiliser sous forme de CSS ou sous forme de SRC Data image. Je vous propose qu'on utilise une intégration d'image avec un SRC, ça donne un code un peu long mais n'oublions pas qu'il n'y a pas de requête client-serveur puisque le code se trouve être directement embarqué dans le HTML et, vous voyez, ici on va jouer le même job que si on avait mis un PNG traditionnel. Pour les prochaines insertions maintenant, on va utiliser directement des classes, ici pour les prochains on va utiliser la classe qui a été attribuée, menu 4, menu 5, menu 6 etc pour pouvoir les intégrer et on va les rajouter directement au sein du CSS. Rapidement on va dire qu'on va faire une intégration de SVG directement en prenant soin de mettre un padding-left de 18 qui est la largeur de l'icône et d'éviter la répétition de cette icône. Pareil pour le PNG, pareil pour le Data et ici, si j'enregistre et que je bascule dans le navigateur, on voit bien que les 4, 5, 6 récupèrent exactement les mêmes images mais cette fois-ci je ne suis pas dans le code HTML, c'est du CSS. Pour l'exemple du menu numéro 7, on va utiliser quelque chose d'un peu plus complexe ici qui va utiliser la possibilité d'arrière-plan dégradé. Pour cela, on va commencer à mettre en place notre menu 7 et on va simplement lui apporter un padding de 18 pixels, padding-left on pourrait dire même parce qu'on sait que notre icône doit être décalée ici, voilà, donc je vais mettre un padding-left de 18 pixels et on va mettre une position relative afin de pouvoir positionner directement notre pseudo élément que l'on va créer ici qui va être un menu-7 : before. Le contenu que l'on va placer à cet élément va être vide, on n'a pas besoin de placer d'élément dedans, on aurait pu mettre un caractère unicode mais ça on peut le faire aussi à la volée. On va le positionner de manière absolute, ici je vais faire un position : absolute et le relatif sera bien sur le parent donc ici le menu set puisque on va être à l'intérieur de cet élément-là. On va mettre un left 0 plus Bien entendu, on n'aura pas de right puisque l'élément ne va pas aller jusque sur la droite, on va juste le caler complètement à gauche et puis on va pouvoir maintenant venir lui donner une largeur et une hauteur de 18 pixels, puisque c'est la taille de notre icône, plus une hauteur hight de 13 pixels. Voilà, on va directement formater cette icône et là on va placer, en arrière-plan directement, un gradient qui va partir jusque vers le bas pour donner une direction qui n'ira pas de droite à gauche mais qui ira vers le bas. En partant du haut, on aura une première rangée black qui ira de 0 à 3 pixels, ça va être très tranché et puis après il y aura un white de 3 pixels à 5 pixels et on va refaire la même chose tout simplement pour chacun de ces éléments, ce qui va faire que maintenant, lorsqu'on va placer cet élément-là sous forme d'élément pseudo, à la volée par le code CSS, et quand on va basculer dans le navigateur, on va s'apercevoir qu'on a exactement le même résultat. Après on peut jouer sur la position top ou relatif, histoire de mieux positionner cet élément dans l'espace. On pourrait faire exactement pareil, une ombre portée qui aurait fait le même job. Ici on va utiliser un menu 8, on va le mettre toujours en padding-left pour décaler notre texte qui reçoit l'icône, position relative parce que là cette fois-ci on va utiliser un pseudo After. Dans le pseudo After on va pouvoir rajouter un contenu toujours vide, une position absolue, une position à gauche de 0, un top, on va le décaler légèrement, on a vu que tout à l'heure ça décalait un petit peu, on va le mettre en display block pour pouvoir justement apporter une ombre portée à cet élément-là. On a donné une largeur de 15 parce que toujours l'ombre portée, vous savez, ça décale un tantinet donc on va la réduire. On pourra toujours ajuster au pixel près si on le souhaite par la suite. On va mettre une hauteur de 0 parce que c'est un élément invisible qui lui va avoir son hauteur et là, dans le box-shadow, on va rentrer un 0 pixel de départ au niveau des x, 0 au niveau des y, avec un décalage de 0 sur le x et 1,5 sur le y avec une couleur noire et on va pouvoir, commence ça, répéter trois fois l'ombre portée. Si je fais un Ctrl + S et que je bascule dans le navigateur, bingo ! on voit notre ombre portée sur le site. J'ai donné 1,5 pour qu'on voit un peu ce côté blur qui apparaît sur le côté des blocs donc on peut utiliser cette partie-là. On peut également utiliser un caractère unicode pour le menu. Il existe un caractère prévu par UTF là-dessus qui est vraiment le 97 76. Il suffit de placer ce caractère-là pour maintenant le voir apparaître sous forme d'icône burger. Bien entendu on n'a pas tout à fait le contrôle sur l'épaisseur des traits, c'est après à nous de jouer sur le principe de la typo pour pouvoir le faire. C'était plus pour l'anecdote on va dire. Maintenant rien ne nous empêche d'utiliser une icône au font donc un Font Awesome par exemple ici. Font Awesome au choix et puis, à ce moment-là, de venir ajouter à l'intérieur d'une balise LI directement le jeu de classe qui va bien, c'est-à-dire la classe fa pour Font Awesome, fa-bars pour l'icône que l'on veut représenter et on peut se permettre un fa large pour l'avoir un peu plus grasse. même manière cette icône. En fermant ici la balise I, ça ira beaucoup mieux, voilà et, en fin de compte on pourrait en avoir un onzième pour la route et là on va l'utiliser en classe qui serait plus un exercice de fun et de style pour cet élément 11 qui consisterait à placer une bordure double en haut et une bordure simple en bas ou vice versa. En fait, si je regarde bien sur cette classe 11, on va toujours utiliser une relative et un décalage pour pouvoir décaler le contenu du lien et on va utiliser un pseudo before qui va placer un contenu toujours vide, une position absolue. On va décaler ce top et ce left à 3 et 0 pixels. On a vu, on a donné une largeur de 1 em ou éventuellement de 16 pixels. Là j'ai utilisé 1 em parce que ça correspond plus ou moins sensiblement à 16 pixels. On va donner une hauteur de 0.125 em pour pouvoir caler cette bordure et l'afficher. N'oublions pas qu'il faut qu'il y ait un contenu à l'intérieur et ce sont les deux bordures qui vont se caler, la double et la simple. Au début, dans la partie haute, on met une double qui fera 0.375 et puis, dans la partie basse, on va mettre une 0.125 qui fera la partie sous vide. C'est un peu du calcul arithmétique pour le caler mais ça fait le job, c'est rigolo, c'est plus pour l'exercice de style et voir qu'on peut, comme ça, délirer ici avec une double bordure dans la partie haute, une bordure dans la partie basse pour représenter ce bord. Voilà, libre à vous d'utiliser la méthode que vous souhaitez soit en intégrant des images soit en jouant par les CSS ou en utlisant une font pour pouvoir représenter cette icône de burger. Il suffit de faire le lien vers Au niveau de sa représentation on va pouvoir utiliser de la

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
Votre/vos formateur(s) :
Date de parution :26 nov. 2015
Durée :2h31 (28 vidéos)

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 !