NavBar Responsive #4 : Menu responsive avec barre d'outils
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h34
de formation
16
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

NavBar Responsive #4 : Menu responsive avec barre d'outils

4.7/5 Trustpilot (1395 avis) Satisfait ou remboursé
1h34
de formation
16
leçons vidéo
1
chapitre

Dans ce quatrième volet de la série NavBar Responsive, nous allons explorer la création d'un menu responsive avec une barre d'outils intégrant des fonctionnalités interactives.
Ce tutoriel vous guidera pas à pas dans la mise en place d'une navigation fluide et moderne, adaptée aux écrans mobiles et desktop.

Nous aborderons :

  • La structure HTML du menu, avec une navigation élégante et accessible,
  • Le style CSS pour un design épuré et une gestion efficace du mode responsive,
  • Le JavaScript pour l'ouverture et la fermeture dynamique du menu, du champ de recherche et du formulaire de connexion.

À la fin de cette vidéo, vous saurez comment implémenter une barre de navigation moderne, intuitive et interactive, idéale pour tout site web.

🚀 Prêt à coder ? Alors c’est parti ! 🎬

Épisodes précédents:

Suggestion: Et si vous passiez votre Certification FrontEnd avec moi ?

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Mise en place du CSS général
Leçon 3
Mise en place du CSS de base du HEADER
Leçon 4
Mise en forme de la zone MENU
Leçon 5
Mettre en place le media queries
Leçon 6
Ouvrir, Fermer la zone MENU
Leçon 7
Créer une boîte SEARCH

Table des matières

Leçon 1

Mise en place du HTML

06m07
Leçon 2

Mise en place du CSS général

03m53
Leçon 3

Mise en place du CSS de base du HEADER

07m36
Leçon 4

Mise en forme de la zone MENU

05m04
Leçon 5

Mettre en place le media queries

05m44
Leçon 6

Ouvrir, Fermer la zone MENU

04m21
Leçon 7

Créer une boîte SEARCH

04m19
Leçon 8

Mettre en forme la boîte SEARCH

07m12
Leçon 9

Ouvrir, Fermer la boîte SEARCH

09m03
Leçon 10

Créer une boîte LOGIN

04m43
Leçon 11

Mettre en forme la boîte LOGIN

13m12
Leçon 12

Ouvrir, Fermer la boîte LOGIN

03m38
Leçon 13

Correction d'un petit bug

02m34
Leçon 14

Bonus 1: Si site One Page

04m14
Leçon 15

Bonus 2: Factorisation du code One Page

05m06
Leçon 16

Bonus 3: Factorisation du code des éléments

07m46

Aperçus

Avis des apprenants

Détail des avis
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 11/07/2025
5
Tuto un peu plus poussé sur le javaScript qui nous perfectionne encore pour un code plus propre et moderne. On a eu droit également à des propriétés CSS jusque-là jamais utilisé (en ce qui me concerne en tout cas) comme pointer-events, backdrop-filter, gap (avec les flexbox) et des manipulations avec les positions. Un cours super bien apprécié. Merci beaucoup Carl - Je ne manquerai pas la suite :-)
Carl Brison
Carl Brison
Merci beaucoup Valérie, pour votre commentaire très gentil ;-)
Regis Philippe
Regis Philippe
Publié le 08/06/2025
5
Nickel, j’attends la suite.
Carl Brison
Carl Brison
Merci beaucoup, c'est vraiment très gentil ;-)
Alain Tardif
Alain Tardif
Publié le 04/06/2025
5
Merci Carl pour votre cours sur le menu responsive avec barre d’outils. J’ai trouvé vraiment sympa la mise en place du `backdrop-filter`, mais surtout la façon dont vous avez structuré et factorisé le JavaScript pour le rendre plus lisible et maintenable. Travail propre et efficace, comme à votre habitude. Validé 100% ✅
Carl Brison
Carl Brison
Merci beaucoup Alain, pour votre commentaire très gentil ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Ce code source au complet de ce tutoriel.
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
14,95€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h34 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€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 788 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
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.7/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)
Continuez votre progression

Formations complémentaires

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

+ 1,400,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com
  • Logo adobe
  • Logo etapes
  • Logo nikon
  • Logo arte
  • Logo xp-pen
  • Logo citia
  • Logo universal
  • Logo jc-decaux
  • Logo cite-science
  • Logo credit-agricole
  • Logo om
  • Logo fff
Paiement 100% sécurisé

Vos données sont chiffrées et protégées pendant toute la transaction.

  • visa-mono
  • mastercard-alt
  • maestro-alt
  • paypal-mono
  • klarna-mono
  • apple-pay-mono
  • google-pay-mono
Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données