Dans le cours : L'essentiel de JavaScript

Créer un menu déroulant avec jQuery - Tutoriel JavaScript

Dans le cours : L'essentiel de JavaScript

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Créer un menu déroulant avec jQuery

“

Maintenant que jQuery est intégré à notre page « index.html », nous allons utiliser la bibliothèque pour animer un menu déroulant. En effet, le site que vous avez devant les yeux est un site responsive, ça signifie qu'il peut s'adapter aux différentes largeurs d'écrans. La preuve, si je modifie ici la largeur de ma fenêtre, vous voyez que l'image se redimensionne, et au bout d'un moment, regardez ce qui se passe avec le menu, il disparaît, et il est remplacé par ce bouton avec les trois barres horizontales que vous voyez dans le coin supérieur droit du site. Regardez, sur les écrans les plus larges, j'ai un vrai menu, sur les écrans les moins larges, j'ai ce bouton. Ça, ça convient particulièrement bien pour les écrans les plus étroits, par exemple, pour les smartphone. En jQuery, nous allons donner vie à ce bouton. Quand on clique sur ce bouton, on veut révéler le menu dans un mouvement du glissement, et quand on re-clique une deuxième fois sur ce bouton, on veut cacher le menu de nouveau dans un mouvement de glissement. Au niveau du code HTML, voici le bouton, il s'appelle « menuToggle » et voici le menu qui n'est pas présent pour le moment à l'écran et que je vais devoir faire apparaître et disparaître dans un mouvement de glissement, ça s'appelle mainNav. Je vais mettre les deux fenêtres côte à côte et me rendre dans mon fichier « menu.js », le voici. Je vais commencer par créer un objet jQuery. Voilà qui est fait, en jQuery, le « $ », c'est le nom d'une variable qui représente l'objet jQuery. Dans cet objet, je vais mettre le document complet et je vais attendre que le document soit ready, qu'il soit prêt. Une fois qu'il est ready, j'exécute une fonction. Cette fonction va aller créer un objet jQuery. Dans cet objet jQuery, je vais mettre le bouton qui s'appelle « menuToggle » et voyez ici qu'on utilise le même sélecteur qu'en CSS. Eh oui, c'est jQuery qui a popularisé cette technique, et dans le JavaScript moderne, rappelez-vous de querySelector et de querySelectorAll, ces deux méthodes du JavaScript ont été directement inspirées par cette technique-ci qui a été inventée par jQuery. Donc, ce bouton qui s'appelle « menuToggle », quand je clique dessus, qu'est-ce que je vais faire ? Je vais exécuter une fonction. Cette fonction va aller rechercher mon menu dans un objet jQuery. Mon menu, rappelez-vous que c'est l'élément #mainNav, et qu'est-ce que je vais faire avec ce menu ? Je vais faire slideToggle, c'est l'une des fonctions de la bibliothèque JavaScript. Si le menu est caché, slideToggle va révéler le menu dans un mouvement de glissement. Si le menu est révélé, slideToggle va cacher ce même menu dans un mouvement de glissement vers le haut. Je sauvegarde et je vais cliquer sur mon bouton, voilà le menu qui s'ouvre et voilà le menu qui se ferme. On va faire une autre expérience je vais cliquer plein de fois. Clic, clic, clic, je lâche, et regardez, sans les mains, le menu continu à bouger, donc, là, il y a un petit bug. Ce qui se passe, c'est que chaque fois que je clique, JQuery va générer une animation et va la mettre dans une file d'attente. Et puis jQuery va jouer chaque animation de la file d'attente une par une jusqu'à ce que la file d'attente soit vide. Donc, si je clique plus vite que la file d'attente, eh bien, les animations s'accumulent et vous avez vu ce qui se passe. Donc, je vais ajouter ici une autre méthode du jQuery, c'est la méthode stop pour stopper les animations en cours et je vais lui passer deux options, true et true, ça, vous irez voir dans la documentation du jQuery ce que ça veut dire, mais regardez, quand je sauvegarde maintenant, mon menu fonctionne toujours, et quand je clique plein de fois, vous voyez que je n'ai plus ce bug, mon menu s'ouvre et se ferme maintenant normalement. Admirez la concision de ce code. Regardez, j'ai cinq lignes de code et encore, les deux dernières, c'est des parenthèses, des accolades, et des points virgules qui se ferment, donc, il y a quasiment rien comme code, ce sont les fonctions de la bibliothèque jQuery qui font ici l'essentiel du travail. Je vous propose dans la vidéo suivante d'aller réellement inspecter ce que fait cette bibliothèque, comment elle anime ce menu.

Table des matières