Mettre en place un menu responsive avec les CSS

Basculer vers un menu adapté aux mobiles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Présenter le menu sur appareil mobile est également une question d'ergonomie, d'utilisabilité et de contextualisation. Penchez-vous sur quelques points clés.
06:14

Transcription

Le Burger est bien apparu mais maintenant il va falloir lui ajouter une forme d'interactivité qui va faire que, lorsqu'on va cliquer sur cet élément de burger, vous souhaiterez voir apparaître tous les éléments de menu qui défilent sur une transition émanant du haut. Il va y avoir besoin de rajouter deux choses à ces éléments-là. La première chose ça va être de rajouter un script JavaScript qui va écouter ce clic sur cet élément-là et pour ça on va pouvoir ajouter un fichier JavaScript que l'on va développer à cette occasion. Ici on va pouvoir travailler sur ce JavaScript mais, comme on va utiliser pour faire plus simple du jQuery, on aurait très bien pu rester en dôme standard et travailler avec du JavaScript interprété par le navigateur. Je vous propose qu'on s'approche de jQuery parce qu'il y a de fortes chances que vous utilisiez jQuery au sein de votre site applicatif donc on va directement pointer vers un cdn pour jQuery et utiliser directement la librairie. Si je rentre maintenant dans mon JavaScript ici, je vais demander déjà d'écouter que le document soit chargé. On va placer un ready(function(e) pour pouvoir écouter cet événement-là et puis on va mettre un écouteur directement sur l'élément burger. Rappelez-vous ici, sur l'élément on pourrait le récupérer par la classe, peu importe, mais dès qu'il y a du JavaScript il vaut mieux s'appuyer sur des id pour être sûr de bien cibler l'élément qu'on souhaite, à moins que ce soit quelque chose d'écouté en plurale sur tous les éléments LI, tous les éléments B etc mais là, dans ce cas-là, je vais le cibler sur l'élément burger et on va écouter ce clic. Pour écouter le clic, on va revenir sur Le JavaScript et on va mettre un événementiel clic. On va placer une fonction native et, première chose à faire, c'est qu'on va demander de s'assurer de ne pas donner le clic interactif par défaut attendu par le système parce que n'oublions pas qu'on peut se retrouver dans une balise A et c'est un peu le cas ici où on se retrouve dans un A. Si on exécute le Javascript, parfait ! mais, de suite après, le navigateur va donner le lien href et va continuer d'exécuter toute l'interaction native de ce système donc il faut vraiment lui demander d'arrêter la transmission de cet événement. Que va-t-il se passer maintenant ? qu'est-ce qu'on veut faire ? ce qu'on souhaite faire, c'est dire j'ai une animation qui va se passer. Ok. Comment va-t-on On pourrait très bien avoir des animations prévues avec JavaScript et déclencher ces animations. Moi j'aimerais rester quand même en CSS et ne déléguer au JavaScript que l'interception de ce clic. Ce qu'on va faire c'est qu'on va changer d'état. Moi j'aime bien le principe de signature qu'Eric Meyer avait apporté au CSS, c'est-à-dire dire que je vais expliquer à ma balise principale, en l'occurence ici ma balise body, navigation qui est ouverte, navOPen moi ça m'irait très bien. Je vais retourner dans mon JavaScript et je vais dire que je vais cibler l'élément body et à cet élément body je vais ajouter un attribut. Cet attribut pourrait être une classe, pourrait être un data-*, pourrait être tous les éléments attributs que vous voulez apporter au body. L'idéal c'est d'utiliser une classe donc une pure signature de classe et dire je vais basculer. Si elle y est, tu me la retires, si elle n'existe pas tu me l'appliques. Ici cette classe on va pouvoir lui donner un nom qui soit assez explicite, navOPen me va très bien. Je vais dire au body d'utiliser ou pas une classe open qui va être placée. Si je viens inspecter dans mon navigateur ici par la console, je vais écouter mon élément audi qui se retrouve ici sur le body. Là je suis passé dans les CSS, je veux rester dans les éléments purs HTML sans signature. de place ici pour le voir. Ici je vais Vous voyez la signature body n'a pas de signature puis, dès que je vais cliquer, j'ai une signature qui apparaît ou pas, je n'avais peut-être pas enregistré, je vais recharger ma page pour être sûr d'avoir la bonne version. J'ouvre le body et, vous voyez, j'ai bien la classe navOPen qui s'est ajoutée. Je clique, elle se retire. Je clique, elle s'ajoute et je clique elle se retire. De ce fait, maintenant, je n'ai plus dans mon CSS qu'à venir détecter si, lorsque je suis en mode max width 800 pixels, j'ai la classe navOPen qui est activée ou pas. Là je vais venir rajouter un navOPen ici, je vais la détecter à cet endroit-là, et qu'est-ce que je souhaite faire ? Ce que je vais demander c'est de faire une transformation, c'est-à-dire l'intégralité de mon navOPen, c'est-à-dire de mon body. Je vais pousser mon body pour lui demander de laisser apparaître ce qui est caché dans la partie haute. Pour ça je vais faire un @include, n'oublions pas qu'on utilise compass donc on peut utiliser ce mixin-là qui va être transform. Vous pourriez l'utiliser en pur CSS aussi, en prenant compte du préfixage et puis surtout de l'intégralité des besoins d'information et de signatures. Ici je vais le faire directement en faisant un translateY et je vais demander à ce translateY de basculer de quoi ? rappelez-vous, ici on avait demandé de faire un menu-haut multiplié par six mais en fait je vais faire exactement la même chose sauf que ce coup-ci je vais le demander en positif et n'oublions pas, attention, cette fois-ci c'est pas les menus qui vont bouger, c'est l'intégralité de navOPen et qui est navOPen ? c'est body puisque Ici je vais pouvoir demander de basculer de six et je vais tester voir ce que ça donne. Je masque cette partie-là, j'actualise ma page, je clique et vous voyez que tout va se passer tranquille, va s'ouvrir tranquillement dans la partie haute et qui est-ce qui a bougé ? c'est le body. En fait le body se trouve ici. Certaines écoles vous diront d'englober l'intégralité de votre HTML dans une balise sur-dimensionnelle qui servirait à cet effet. N'oubliez pas que vous pouvez utiliser le body parce que là attention, on s'adresse quand même à des navigateurs de dernière génération, Internet Explorer 6, 7 etc. Là on va se retrouver dans des parties mobiles généralement et qui vont pouvoir faire le job. Pour pouvoir donner quand même un effet de transition ici, on va l'appliquer au body attention ! Ici je vais pouvoir faire un @include transition et je vais demander en transition une duration qui va être de 0.2s par exemple. Je recharge ma page et vous voyez que maintenant, quand je clique, ça s'ouvre, ça se ferme, avec une transition qui va pouvoir faire le job. que l'état a changé et que je suis par exemple dans une Ce qu'on va faire

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 !