Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Animer le menu principal

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez comment écrire un petit script en jQuery afin d'animer le menu principal de votre page. Travaillez au niveau du point d'arrêt le plus étroit.

Transcription

Pour pouvoir animer mon menu, je vais commencer par créer un nouveau fichier Javascript dans mon site. Donc je vais faire un clic-droit sur mon dossier js, demander un nouveau fichier, que je vais appeler par exemple « didaxo.js », comme ceci. De retour dans ma page HTML, je vais bien évidemment appeler ce fichier Javascript ici, après avoir appelé bien sûr la bibliothèque JQuery. Donc j'ai besoin d'une nouvelle balise script. La source, ce sera dans le dossier js « didaxo.js ». Voilà qui est fait. Alors dans ce fichier Javascript, je vais attendre que le document soit prêt et donc je vais aller rechercher en Jquery le document et je vais attendre l'événement « ready » associé à ce document. Et quand le document est prêt, et bien j'exécute une fonction anonyme, comme ceci. Cette fonction, elle va aller rechercher le bouton sur lequel je dois cliquer dans le dôme. Alors pour avoir plus facile à aller rechercher ce bouton, et bien je vais lui donner un nom. Je vais l'appeler par exemple, « hamburger » puisque très souvent, on fait référence à cette icone avec les trois barres, comme étant une icone d'hamburger. Voilà, je sauvegarde ma page HTML. Je vais donc aller rechercher en JQuery, et bien cet élément « hamburger », voilà. Et donc quand je clique sur cet élément « hamburger », et bien j'ai envie d'exécuter de nouveau une fonction anonyme, comme ceci. Cette fonction va aller rechercher le menu. Alors le menu, c'est quoi ? Cest dans la zone « mainNav » de mon site l'élément ul, et j'ai envie de faire « slideToggle ». Alors « slideToggle », c'est une méthode du JQuery, je vais lui passer un nombre ici, par exemple 300. Et ça, ça signifie que l'animation se déroulera sur 300 millisecondes. Alors je sauvegarde, je vais retourner dans mon navigateur, rafraichir ma page, vous voyez que je suis dans le bon point d'arrêt. Et quand je clique sur mon bouton, mon menu se révèle. Quand je reclique une deuxième fois, mon menu se cache. Alors il y a encore quelques petits bugs à résoudre, notamment, si je clique de manière répétée sur ce bouton plusieurs fois, et bien vous voyez que ce menu n'arrête pas de s'ouvrir et de se fermer. Ça, c'est parce que JQuery fonctionne sur la base d'une file d'attente d'animations. Donc chaque fois que je clique sur ce bouton, j'ajoute une animation à la file d'attente et donc JQuery va jouer, une par une, toutes ces animations de la file d'attente, jusqu'à la dernière. Donc pour éviter ce petit bug, et bien je vais ajouter ici la méthode « stop » du JQuery, qui va arrêter l'animation en cours et je vais lui passer deux paramètres qui sont tous les deux des paramètres booléens, donc « true » « true » ici. Le premier « true » signifie que j'arrête l'animation donc, et que grâce à ce premier « true » je vais directement aller à l'état de fin de cette animation. Et le second « true » signifie que je vais vider la file d'attente des animations qui s'y trouveraient. Donc je vais sauvegarder celles-ci, revenir sur mon navigateur, rafraichir ma page, et regardez maintenant quand je clique de manière répétée sur mon menu, mon menu réagit beaucoup plus vite, et ne se met pas à clignoter indéfiniment sur ma page. Alors je vais encore peaufiner une toute petite chose. J'ai envie, quand le menu est ouvert, de changer l'icone ici. C'est-à-dire de mettre une croix plutôt qu'une icone de hamburger. Alors pour ça, retournons dans notre fichier HTML, et rappelons-nous la manière dont cet hamburger a été introduit dans le fichier. C'était grâce à notre police de caractère Font Awesome et regardez ici, nous avons un élément i, avec une classe qui s'appelle « fa-bars » et cette classe, en fait, elle se trouve dans le fichier CSS Font Awesome que nous avons ici. Et c'est elle qui est responsable d'appeler le caractère du hamburger ici dans mon fichier. Alors au niveau de Font Awesome, et bien regardez, j'ai d'autres icones. Notamment cette croix. Et cette croix, regardez, elle utilise la classe « fa-times ». Donc je vais, en plus du reste, modifier les classes CSS pour pouvoir avoir une autre icone sur mon bouton. Donc je vais revenir ici, dans mon script. Et donc, en plus d'animer mon menu, quand je clique sur le bouton, je vais également aller rechercher dans l'élément « mainNav » plus précisément encore, dans l'élément « hamburger », et bien, cet élément i et donc je vais utiliser une autre méthode du jquery qui s'appelle « toggle class » pour allumer ou éteindre des classes CSS. Et donc les deux classes que je veux permuter, c'est la classe « fa-bar » et la classe « fa-times », comme ceci. « Toggle class » signifie tout simplement que si la classe est présente, elle va être retirée, et si la classe n'est pas présente, elle va être ajoutée. Donc je vais simplement ici permuter ces deux classes. Je sauvegarde. Je reviens dans ma page HTML, voilà je rafraichis. Et regardez quand je clique sur le bouton, l'icone change, c'est une icone avec une croix. Donc pour pouvoir maintenant refermer ce bouton, et voilà, mon menu qui est animé. Et ma mise en page « portrait tablette » qui est à présent complètement terminée.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

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 !