Dev. FrontEnd#4 : Réaliser un menu responsive facilement
ERROR
00:00
00:00

TUTO Dev. FrontEnd#4 : Réaliser un menu responsive facilement

Carl Brison
10,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Apprenez à créer un menu responsive complet

J'ai l'immense plaisir de vous proposer ce nouveau tuto vidéo dont la connaissance est une base indispensable de nos jours pour tout développeur Front-End, à savoir la mise en place d'un menu responsive.

Dans ce tuto nous allons voir ce qu'il y a de plus classique, ce que l'on retrouve le plus couramment sur un site Internet :

  • Un menu horizontal pour les grands écrans (type écran d'ordinateur)
  • Un menu hamburger pour les petits écrans (type écran de smartphone)

Pour cela nous utiliserons le CSS 3, notamment les flexbox (je vous invite à suivre mon tuto sur l'apprentissage des flexbox si cela n'est pas déjà fait) et nous utiliserons jQuery (je vous invite à suivre mon tuto sur l'apprentissage de jQuery si cela n'est pas déjà fait).

A la fin de ce tuto, vous serez très à l'aise dans la construction d'un menu responsive !
Je mets à votre disposition le script du tuto. Un QCM vous permettra de tester vos nouvelles connaissances sur le sujet ! Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Présentation du travail
Leçon 2
Mise en place du HTML et de la base CSS
Leçon 3
Création du menu hamburger 1/2
Leçon 4
Création du menu hamburger 2/2
Leçon 5
Mise en place du jQuery
Leçon 6
Conclusion
Leçon 7
Bonus

Plan détaillé du cours

Leçon 1Présentation du travail
02m01s
Leçon 2Mise en place du HTML et de la base CSS
08m40s
Leçon 3Création du menu hamburger 1/2
06m47s
Leçon 4Création du menu hamburger 2/2
06m41s
Leçon 5Mise en place du jQuery
08m06s
Leçon 6Conclusion
01m45s
Leçon 7Bonus
05m

Avis des apprenants

Détail des avis
50
Apprenants
10
Commentaires
4,9/5
Note moyenne
5/5
9
4/5
1
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 10/02/2023
Super tuto sur le sujet hamburger. J'ai bien aimé les deux méthodes proposées, soit en display: block; soit en display: flex;. Merci pour la qualité de vos tutos. Validé 100 % DevFrontEnd#4
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Jérôme Chataux
Jérôme Chataux
Publié le 28/11/2019
Super ce tuto simple et efficace qui peut-etre résoudre mon problème
Carl Brison
Carl Brison
SI c'est le cas, tant mieux ;-)
Fabrice Chapier
Fabrice Chapier
Publié le 14/08/2020
Merci pour ce tutoriel ! Je trouve dommage : - qu’il n’y a pas de « croix » pour fermer quand le menu est actif - si on clique sur un lien du menu, est-ce que le menu reste visible ? Si oui, comment le gérer ? En Css ou Jquery ? - enfin, pas de conseil pour l’intégration de ce menu burger dans une autre page
Carl Brison
Carl Brison
Je vous ai répondu sur un précédent commentaire. J'ai plusieurs tutos sur le menu burger et certain affichent une croix à la place du menu burger et d'autres non. Le choix est très vaste et les niveaux des tutos ne sont pas toujours les mêmes.

Vos questions sur le cours

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

CSS 3, jQuery

Que contient le fichier source ?

Le script du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1331 tutos gratuits

Notre politique de protection des données