JavaScript moderne avancé - Navigation à onglet dynamique
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
49m25
de formation
7
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

JavaScript moderne avancé - Navigation à onglet dynamique

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

Dans ce tuto Javascript nous allons apprendre à réaliser un menu à onglet que nous allons considérer comme la navigation d'un site web.
Ce menu à onglet sera piloté par du code JavaScript moderne.
Afin de rendre notre site One Page attractif, nous allons utiliser la magie du CSS. Cela nous permettra de changer de section, grâce à des transitions et de manière dynamique (sans rechargement de page).

Je mets le code source à votre disposition.

Si vous voulez apprendre à programmer en JavaScript moderne, voici un bundle de 14H00 qui vous donnera toutes les bases.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des bases de la page web
Leçon 2
Détail des zones header et nav
Leçon 3
Détail de la zone section
Leçon 4
Positionnement des sections
Leçon 5
Activer les liens en JavaScript moderne
Leçon 6
Activer les sections en JavaScript moderne
Leçon 7
Conclusion

Table des matières

Leçon 1

Mise en place des bases de la page web

07m15
Leçon 2

Détail des zones header et nav

09m02
Leçon 3

Détail de la zone section

10m13
Leçon 4

Positionnement des sections

06m58
Leçon 5

Activer les liens en JavaScript moderne

07m54
Leçon 6

Activer les sections en JavaScript moderne

06m32
Leçon 7

Conclusion

01m31

Aperçus

Avis des apprenants

Détail des avis
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 28/01/2025
5
Merci Carl, pour votre cours sur la navigation d’un onglet dynamique. J’ai trouvé particulièrement intéressant l’utilisation du transform et de la transition pour animer le passage entre les sections, ainsi que la manière élégante dont vous les faites "disparaître" hors de l’affichage grâce à overflow: hidden. Ces détails, combinés à une palette de couleurs bien pensée et à des effets hover subtils, apportent une fluidité et un rendu très soigné. Un grand merci pour cette démonstration technique et inspirante ! Validé 100%
Carl Brison
Carl Brison
Merci beaucoup Alain, pour votre commentaire super gentil ;-)
Valérie Arno
Valérie Arno
Publié le 14/02/2024
5
Un tuto pas très difficile et qui donne quelque chose de pratique et agréable à l'oeil. Ça fait une petite révisions de nos bases javaScript. Je mémorise les boucles, c'est pas mon "for"t :-) Par contre pas facile de régler la hauteur quand il y a beaucoup de contenu. Merci Carl. Vos enseignements sont toujours agréables à suivre et utiles.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie ;-)
Philippe Piatti
Philippe Piatti
Publié le 28/01/2024
5
Excellent tuto ! et comme toujours très très bien expliqué cela m'a permis de revoir les bases Front End JavaScript .
Carl Brison
Carl Brison
Merci beaucoup pour ton commentaire très gentil ;-)

Vos questions sur le cours

Que contient le fichier source ?

Le code source du tutoriel.

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
10,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
49m25 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