Animation de l'icône burger d'un menu
ERROR
00:00
00:00

TUTO Animation de l'icône burger d'un menu

Sébastien Imbert
14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS3 et Javascript, je vous propose d'apprendre à créer et animer un menu Burger. Grâce aux propriétés du CSS3, il est possible de créer, mais aussi d'animer cette icône, sans faire appel à de ressources extérieures (gif, font-icône, etc.).

L'icône Burger est généralement représentée par trois traits horizontaux pour indiquer à l'utilisateur la présence d'un menu. De plus en plus incontournable, elle est très souvent présente sur les versions mobiles de sites web, mais parfois aussi sur des versions desktop.

Au programme de ce cours Création et Animation d'un menu Burger :

Ce tuto se divise en trois chapitres, chaque chapitre sera dédié à une animation correspondant à un niveau de difficulté (débutant, intermédiaire, et avancé)

Au cours des différents chapitres, nous verrons :

  • comment créer une icône burger uniquement en HTML et CSS, ou en l'intégrant directement avec un SVG
  • comment utiliser les pseudo-éléments before et after et les positions absolute et relative
  • comment utiliser la librairie jQuery pour détecter le clic sur l'icône
  • comment faire des transformations et transitions CSS pour créer des animations
  • comment créer un SVG en HTML
  • comment animer un SVG à l'aide des propriétés CSS stroke-dasharray et stroke-dashoffset
  • comment savoir quand utiliser une librairie Javascript ou le CSS pour faire une animation sur du SVG

À la fin de ce tutoriel, vous saurez reproduire les 3 animations de ce tutoriel, mais aussi créer vos propres animations à l'aide des connaissances acquises au cours du tuto.

Je reste bien sûr disponible dans la section d'entraide de ce cours pour répondre à vos questions.

Les fichiers sources sont fournis.
 

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Première animation
Chapitre 2
Deuxième animation
Chapitre 3
Troisième animation

Plan détaillé du cours

Chapitre 1 : Première animation
20m29s
 
Leçon 1Création de l'icône statique
Leçon 2Création du script jQuery
Leçon 3Animation de l'icône
Chapitre 2 : Deuxième animation
39m05s
 
Leçon 1Création de l'icône statique et effet de hover
Leçon 2Animation de l'icône
Leçon 3Bien comprendre la propriété CSS transform-origin
Leçon 4Création de la bordure en SVG
Leçon 5Animation de la bordure
Chapitre 3 : Troisième animation
31m41s
 
Leçon 1Intégrer le SVG dans le HTML
Leçon 2Animation du SVG 1/2
Leçon 3Animation du SVG 2/2
Leçon 4Transitions CSS avec cubic-bezier

Aperçus

Avis des apprenants

Détail des avis
90
Apprenants
11
Commentaires
5/5
Note moyenne
5/5
11
4/5
0
3/5
0
2/5
0
1/5
0
Jean Villemont
Jean Villemont
Publié le 29/03/2023
merci pour ce tuto, pas trop complexe et peu de code
Philippe Piatti
Philippe Piatti
Publié le 01/08/2021
Merci Sébastien , j'ai hâte que tu fasses plus de cours merci encore :)
Cédric Marniquet
Cédric Marniquet
Publié le 10/09/2020
Tutoriel intéressant, merci beaucoup !

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données