Dans ce cours dédié au JavaScript moderne avancé, nous allons apprendre à créer un menu Burger 100% responsive de A à Z.
Cela signifie que nous allons décortiquer entièrement la mise en place d'un menu responsive, comme on en voit sur tous les sites web modernes.
Nous utiliserons le CSS moderne tel que Flexbox, que nous associerons au JavaScript moderne. Cela nous permettra d'obtenir un menu responsive 100% moderne et 100% fonctionnel !
A la fin de ce tutoriel, vous serez en mesure de mettre en place vous-même un menu responsive entièrement personnalisé pour tous vos projets web !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Pré-requis pour suivre ce cours en ligne
Pour suivre ce tutoriel dans de bonnes conditions, il est fortement conseillé d'avoir des connaissances en JavaScript et notamment en JavaScript moderne.
Si tel n'est pas votre cas, je mets à votre disposition, une formation complète qui vous permettra de connaître toutes les bases en programmation moderne en JavaScript.
Pour aller plus loin :
Table des matières de cette formation JavaScript, CSS (durée : 2h31m)
-
Les bases
- Présentation du tuto gratuit 00:06:10
- Mise en place des zones A et B 00:09:55
- Mise en place de la zone C 00:11:21
-
Détail de la zone A
- Mise en place d'une zone Logo 00:05:00
- Création d'une liste non ordonnée 00:12:14
- Mise en forme avec séparateur 00:06:14
- Mise en forme avec background 00:07:38
- Complément pour la classe "on" 00:02:32
-
Détail de la zone B
- Mise en place d'un icone Burger 00:05:52
- Mise en place d'un icone en Croix 00:04:29
- Création d'un menu burger en CSS 00:04:50
- Création d'une croix en CSS 00:09:42
-
Détail de la zone C
- Adoucir l'arrivée de la zone C 00:02:46
- Modifier le sens d'arrivée de la zone C 00:08:25
- Superposer la zone C à la mise en page 00:05:44
-
Mise en application dans un projet web
- Création des zones header, nav, article et footer 00:11:12
- Détail des zones header, article et footer 00:05:13
- Détail de la zone Nav sur les écrans grand et moyen 00:08:49
- Détail de la zone Nav sur l'écran petit 00:07:36
- Mise en fonctionnement 00:06:02
- Petite discussion de mise en page 00:07:06
-
Conclusion
- Conclusion 00:02:22
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl pour ce tutoriel vraiment intéressant que vous avez créé sur la création d'un menu burger en JavaScript. Cette fonctionnalité est très utile et souvent utilisée, et grâce à votre tutoriel, j'ai pu ajouter un nouvel outil à ma boîte à outils. J'ai apprécié vos bons conseils et votre approche moderne du JavaScript. Votre tutoriel est validé à 100% !
-
C'est le genre de tuto que j'aime bien, pas difficile mais on apprend des choses auxquelles on ne penserait pas, et nos tuyaux se rallongent après chaque cours avec vous. :) Des explications précises pour chaque étape qui nous font bien progresser pour faire des pages web au top. Je pense que je vais revoir mes sites pour ce qui est de l'affichage de mes menus pour les petits écrans :-) En fait rien n'est jamais terminé pour le web. Merci Carl.
-
Tuto { top: 100%; }
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés