17,00

Tuto Dev FrontEnd #3 : Menu hamburger avec CSS, JavaScript

17,00

  • Une formation vidéo de 1h29m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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 !

Table des matières de cette formation CSS, JavaScript (durée : 1h29m)

  • Mise en place du site internet
    • Présentation du travail gratuit 00:04:11
    • Réalisation du site avec CSS Grid 00:12:04
    • CSS Grid et Flexbox 00:09:49
    • Mise en place des medias queries 00:04:15
  • Réalisation de la navigation
    • Présentation du travail 00:03:04
    • Développement du menu 1/2 00:09:40
    • Développement du menu 2/2 00:05:07
    • Intégration du menu au site 00:07:24
    • Réalisation du menu hamburger en CSS 00:05:34
    • Intégration du menu hamburger au site 00:06:14
    • Animation du menu hamburger 1/2 00:08:09
    • Animation du menu hamburger 2/2 00:04:50
  • Conclusion
    • Conclusion 00:02:01
  • Bonus
    • Ajout d'une croix de fermeture 00:05:30
    • Déclalage du menu 00:01:16



Formateur : Carl Brison

Carl Brison a publié 186 tutoriels et obtenu une note moyenne de 4,9/5 sur 12 759 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

4,6
note moyenne

9
avis laissés
5 étoiles
7
4 étoiles
1
3 étoiles
0
2 étoiles
1
1 étoile
0
  • 5
    avis de faboldchap03400 laissé 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
    "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 ;-) "

  • 5
    avis de membre-7459-7618 laissé le 12/01/2020
    Excellent tutoriel.Tout y est : la technique, la pédagogie, les astuces, la fluidité, les nouveautés... Je reprends la programmation internet après plusieurs années d'interruption et c'est vraiment le tutoriel qu'il me fallait. Je le recommande vivement, car il est vraiment adapté pour tous les niveaux.
    "Super ;-) Je suis vraiment très heureux de vous permettre de vous remettre dans le développement web ;-) A bientôt, Carl."

  • 5
    avis de destmich laissé le 20/08/2019
    Super Tuto. Il y a déjà longtemps que je cherchais comment gérer ce menu sans devoir utiliser bootstrap. Encore merci à toi Carl.
    "Génial ! Merci pour ton commentaire Michel ;-)"

  • 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
accédez à plus de 1249 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données