Comment faire un menu burger sans programmation ?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Comment faire un menu burger sans programmation ?

Carl Brison
9,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Leçon 1Mise en place du HTML
06m31s
Leçon 2Mise en page des trois zones
09m43s
Leçon 3Mise en forme du menu
05m40s
Leçon 4Retour au HTML
07m24s
Leçon 5Apparition / Disparition du menu burger
05m05s
Leçon 6Apparition / Disparition des items du menu
05m52s
Leçon 7Mise en forme de la liste non ordonnée
05m58s
Leçon 8Mise en forme des items
02m48s
Leçon 9Conclusion
01m19s

Avis des apprenants

Détail des avis
51
Apprenants
14
Commentaires
5/5
Note moyenne
5/5
14
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 08/09/2023
Merci Carl, je suis bluffé avec ce cours, j'ignorais qu'il était possible de mettre un menu burger uniquement avec du CSS, vraiment, bravo à vous, pour ce cours très bien expliqué. Validé 100 %. #menu-burger-sans-prog
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Antonio Coelho
Antonio Coelho
Publié le 16/01/2022
.....................................
Jean-François Lairez
Jean-François Lairez
Publié le 14/11/2021
Très didactique, clair et simple. merci;
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil

Vos questions sur le cours

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

CSS 3, HTML 5

Que contient le fichier source ?

Le code source du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1335 tutos gratuits

Notre politique de protection des données