Mettre en place un menu responsive avec les CSS

Gérer l'ajout du burger de manière dynamique

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous avez pu préserver l'intégrité du code HTML sans ajouts superflus. Cependant, le code pour ancrer le menu burger a bien été ajouté à vos contenus. Pensez à dynamiser l'ajout de ce menu burger.
03:47

Transcription

Dans l'étape précédente, on prône le fait de ne pas surcharger inutilement notre code html, et là il se trouve qu'on a un code html que depuis le début on utilise, et qu'on a rajouté pour aucune raison d'un point de vue contenu, si ce n'est pour pouvoir afficher notre icône burger, donc en fait, on est un peu mal loti pour dire : ne surchargeons pas le html. Maintenant qu'on a bien compris la fonctionnalité de ce burger, ce que je vous propose de faire, c'est de le retirer ici, donc dès que je fais CTRL S automatiquement si j'actualise ma page, on n'a plus cette icône burger qui apparaît, par contre maintenant ce qu'on va faire, c'est venir ici dans notre document JavaScript qui est lié, pour pouvoir venir prendre en compte la génération automatique de ce burger. Alors n'oublions pas qu'au début on avait intégré chikou ri ce qui va nous permettre d'aller beaucoup plus rapidement aux fonctionnalités souhaitées en ajoutant au DOM cet élément de burger. Alors comment le faire ? On peut le faire de manière très directe en une seule ligne, moi j'aime bien décomposer pour pouvoir avoir un meilleur contrôle visuel sur le code qui a été écrit. Alors ici, on va créer une variable qu'on va appeler burger par exemple et dans cette variable, on va créer simplement une balise angr. Alors, on aurait pu le créer de diverses manières, cette manière a l'avantage de pouvoir être explicite au niveau du href, au niveau de ce qu'elle contient. On aurait très bien pu rajouter ici aussi classe burger, ID burger. Il faut pas pousser trop loin, je pense, le délire de créer par une string nos éléments, il est toujours bon de garder du JavaScript pour le faire surtout que ça ne mange pas de pain à ce niveau-là, c'est très rapidement exécuté. Et ça nous permet d'avoir un meilleur contrôle si on doit modifier de manière dynamique la génération de ces lignes. Alors qu'est-ce qu'on va faire : on va ajouter une classe qui sera burger et on va ajouter un attribut ID qui sera burger également. Maintenant on va gérer la partie événementiel. Alors, on va rajouter sur le burger le clic avec notre fonction anonyme comme on l'avait fait par le JavaScript précédent, et cette fois-ci, on va aussi faire un e.preventDefault pour dire : attention, à cet événement je ne veux pas transmettre l'évènementiel qui a été capté, ce que je veux c'est le bloquer là, de ne pas exécuter ce qui serait exécuté de manière native par le navigateur. Et maintenant, on va rajouter notre body, notre fameuse fonctionnalité qui était le fameux toggleClass navOpen qu'on avait rajouté tout à l'heure, c'est-à-dire on va dire, au body, je fais un toggleClass navOpen qui va permettre de permuter cette signature, on va dire, qui nous permet de visualiser l'ouverture des menus. Et qu'est-ce qui nous reste à faire maintenant ? Mais c'est de faire ce qu'on appelle un prepend, c'est-à-dire de venir ajouter tout ça, avant le contenu, à body On va faire un header, on va sélectionner un sélecteur header, on va faire un prepend et on va placer ce burger. Donc si j'enregistre ici maintenant sous JavaScript et que je recharge ma page, je vois bien que le logo est arrivé, et bien entendu, la fonctionnalité est intégrée. Ce qui fait que quand même, ici, au niveau de mon code je n'ai rien, et si je regarde au niveau de l'inspection de mon code, si je regarde simplement sur l'élément, je vais sortir du device ici pour rester dans la partie visuelle, je reviens à cet élément-là toujours en ayant le logo, je vais me redonner un peu de place à ce niveau là, et vous voyez bien que, au niveau du header, on a bien le burger qui est apparu ici, et bien entendu, si je redimensionne ma page plus largement, le burger est resté parce qu'il a été ajouté directement par la page au niveau du chargement. Donc, pensez à prendre en considération ou en compte ce genre d'élément-là, c'est-à-dire de ne pas venir surcharger votre html par du html en lui-même, mais le faire à la volée par du javascript, de façon à avoir une page qui pourrait être distribuée sur des liseuses ou n'importe quel autre périphérique qui utiliserait, lui, que le html sans avoir à intégrer des balises supplémentaires " inutiles" au contenu.

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 !