Comment faire un menu burger sans programmation ?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
50m20
de formation
9
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Comment faire un menu burger sans programmation ?

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
50m20
de formation
9
leçons vidéo
1
chapitre

Vous n'êtes pas fan de la programmation et pourtant vous aimeriez avoir un menu burger sur votre site, lorsque celui-ci a une taille réduite ?
Alors ce tuto en vidéo est fait pour vous.
Je vous propose de faire ensemble une page web, moderne, efficace et 100% responsive, sans jamais faire appel, ni au JavaScript, ni au jQuery et encore moins à la librairie VueJS.

Uniquement de HTML et du CSS et rien d'autre !

Notre projet, réalisé en desktop first, possédera par défaut une barre de navigation horizontale.
En deçà d'un certain point, la mise en forme de la navigation sera modifiée. A la place des liens composant le menu, nous mettrons en place une icône représentant un menu burger. Et lorsque l'utilisateur va cliquer sur cette icône, alors un menu vertical venant de la droite de l'écran viendra couvrir l'ensemble de la page web. Une petite croix permettra à l'utilisateur de fermer le menu.

Pour suivre ce tuto dans de bonnes conditions, il est préférable de connaître Flexbox. Voici un tuto qui vous permettra de maîtriser cette technologie en cas de besoin 

Je mets l'ensemble du code source à votre disposition et je reste disponible dans le salon d'entraide pour répondre à vos questions sur le cours. 
Bonne formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Mise en page des trois zones
Leçon 3
Mise en forme du menu
Leçon 4
Retour au HTML
Leçon 5
Apparition / Disparition du menu burger
Leçon 6
Apparition / Disparition des items du menu
Leçon 7
Mise en forme de la liste non ordonnée

Table des matières

Leçon 1

Mise en place du HTML

06m31
Leçon 2

Mise en page des trois zones

09m43
Leçon 3

Mise en forme du menu

05m40
Leçon 4

Retour au HTML

07m24
Leçon 5

Apparition / Disparition du menu burger

05m05
Leçon 6

Apparition / Disparition des items du menu

05m52
Leçon 7

Mise en forme de la liste non ordonnée

05m58
Leçon 8

Mise en forme des items

02m48
Leçon 9

Conclusion

01m19

Avis des apprenants

Détail des avis
175
Apprenants
17
Commentaires
5/5
Note moyenne
5/5
16
4/5
1
3/5
0
2/5
0
1/5
0
Guy Saenen
Guy Saenen
Publié le 30/11/2025
Pour être complet, il y manque peut-être "disparition du menu bruger si je clique sur un lien de ce menu" et cela n'a rien de difficile. Mais à part cela, "nickel"
Andree Claire Lieg
Andree Claire Lieg
Publié le 18/05/2025
Très pédagogique, explique chaque étape.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Mathieu Baclet
Mathieu Baclet
Publié le 22/12/2024
Merci pour ces explications claires, c’est exactement le tuto que je recherchais pour pouvoir intégrer un menu burger sans js. Comme toujours, vos tutos sont au top!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire vraiment très gentil ;-)

Vos questions sur le cours

Que contient le fichier source ?

Le code source du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
8,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
50m20 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données