Dev FrontEnd #3 : Menu hamburger
ERROR
00:00
00:00

TUTO Dev FrontEnd #3 : Menu hamburger

Carl Brison
17,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Apprenez par la pratique : créer un menu hamburger

Pour ce 3ème tuto entièrement dédié à la pratique du développement côté front-end, je vous propose de réaliser un menu hamburger (également appelé menu burger).

Nous n'allons pas nous contenter que de réaliser ce menu hamburger, nous allons également réaliser la maquette du site en utilisant la technologie du CSS-Grid.
Nous rendrons notre site responsive et nous ferons apparaître le menu hamburger pour l'écran réservé aux smartphones.

Concernant le menu en lui-même, nous utiliserons la technologie des flexbox pour le réaliser.

Cela viendra ainsi aider à la compréhension de quand on utilise la technique du CSS-Grid et quand on utilise la technique des Flexbox qui je le rappelle sont complémentaires !
Enfin, nous nous servirons de JavaScript pour animer notre menu. Nous coderons deux fonctions, une pour faire apparaître le menu et une pour le faire disparaître.

Je reste disponible dans le salon d'entraide de ce cours pour répondre à vos éventuelles questions.
Un QCM est également fourni pour tester vos nouvelles connaissances.

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Mise en place du site internet
Chapitre 2
Réalisation de la navigation
Chapitre 3
Conclusion
Chapitre 4
Bonus

Plan détaillé du cours

Chapitre 1 : Mise en place du site internet
30m19s
 
Leçon 1Présentation du travail
Leçon 2Réalisation du site avec CSS Grid
Leçon 3CSS Grid et Flexbox
Leçon 4Mise en place des medias queries
Chapitre 2 : Réalisation de la navigation
50m02s
 
Leçon 1Présentation du travail
Leçon 2Développement du menu 1/2
Leçon 3Développement du menu 2/2
Leçon 4Intégration du menu au site
Leçon 5Réalisation du menu hamburger en CSS
Leçon 6Intégration du menu hamburger au site
Leçon 7Animation du menu hamburger 1/2
Leçon 8Animation du menu hamburger 2/2
Chapitre 3 : Conclusion
02m01s
 
Leçon 1Conclusion
Chapitre 4 : Bonus
06m46s
 
Leçon 1Ajout d'une croix de fermeture
Leçon 2Déclalage du menu

Avis des apprenants

Détail des avis
40
Apprenants
11
Commentaires
4,7/5
Note moyenne
5/5
9
4/5
1
3/5
0
2/5
1
1/5
0
Alain Tardif
Alain Tardif
Publié le 10/02/2023
Merci Carl pour ce cours et votre travail sur ce cours dédié au menu hamburger. Ce tuto m'a aidé à comprendre comment le mettre en place facilement et va très certainement m'être utile dans un proche avenir. Validé 100 % DevFrontEnd#3.
Carl Brison
Carl Brison
Merci pour votre commentaire vraiment très gentil ;-)
Dehousse Marcel
Dehousse Marcel
Publié le 25/05/2021
Comme d'habitude, très clair et précis. Je suis fan de vos tutos. Bonne continuation et continuer à mettre vos tutoriels sur le site. Merci Cordialement Marcel
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Fabrice Chapier
Fabrice Chapier
Publié le 14/08/2020
Très bon Tuto comme d’habitude ! Juste une remarque : il aurait été judicieux de remonter la Nav au-dessus du Header et remplacer le symbole Burger par La Croix Et par conséquent supprimer le Li de La Croix. Qu’en pensez-vous ? Quelle solution préconisez vous pour créer seulement un menu burger et ensuite pouvoir l’incorporer directement dans une autre page ? Merci Carl Brison
Carl Brison
Carl Brison
Oui vous avez raison. J'ai plusieurs tutos sur les menus Burger, et certains font ce que vous attendez, à savoir remplacer le burger par une croix. Le choix est très vaste (on peut même animer tout cela, j'ai un tuto également pour cela). Merci beaucoup pour votre commentaire ;-)

Vos questions sur le cours

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

CSS 3, JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le script du tuto

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données