JS moderne, EXO #15 - Menu à onglet vertical et horizontal
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h12
de formation
8
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

JS moderne, EXO #15 - Menu à onglet vertical et horizontal

4.8/5 Trustpilot (1390 avis) Satisfait ou remboursé
1h12
de formation
8
leçons vidéo
1
chapitre

Dans ce tuto dédié à la pratique du JavaScript moderne, nous allons créer un menu à onglet vertical pour les grands écran et horizontal pour les petits écrans.
Pour cela, nous allons utliser les technologies modernes, à commencer par le CSS.
Pour réaliser la mise en forme de notre menu à onglet vertical puis horizontal, nous utiliserons Grid et Flexbox.

Nous verrons également comment ajouter certaines fonctionnalités d'accessibilité à notre menu.

Pour le codage de notre menu à onglet, nous utiliserons le JS moderne.
Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bonne création de menu.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des zones principales
Leçon 2
Mise en place des onglets
Leçon 3
Mise en place des sections
Leçon 4
Création du code des onglets en JS
Leçon 5
Création du code des sections en JS
Leçon 6
Mise en forme finale
Leçon 7
Conclusion

Table des matières

Leçon 1

Mise en place des zones principales

10m21
Leçon 2

Mise en place des onglets

13m33
Leçon 3

Mise en place des sections

07m29
Leçon 4

Création du code des onglets en JS

07m54
Leçon 5

Création du code des sections en JS

05m16
Leçon 6

Mise en forme finale

07m45
Leçon 7

Conclusion

03m29
Leçon 8

Bonus : Notion d'accessibilité

16m36

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
Valérie Arno
Valérie Arno
Publié le 19/02/2023
5
Un bon tuto qui nous en apprend encore sur la manière de rendre nos design plus agréables. Par contre il faut ajuster les dimensions de la boite et des items en fonction du contenu. Chez moi tout débordait et le -100% du top n'a pas suffit pour cacher les items inactifs et pour les écrans à 850px le bas allait mais à la réduction taille mobile la fin des textes était cachée. J'ai résolu tout ça. Sympa aussi le bonus pour agrandir/diminuer la taille du texte. j'avais vu ça déjà dans un autre tuto mais les révisions sont toujours utiles. Merci Carl j'espère avoir l'occasion d'utiliser cette disposition.
Carl Brison
Carl Brison
Merci Valérie, et vous avez maintenant les capacités d'adapter vos codes, bravo !
Bernard Chabloz
Bernard Chabloz
Publié le 29/01/2023
5
Le plaisir est là, en effet!
Carl Brison
Carl Brison
Merci beaucoup ;-) !
Alain Tardif
Alain Tardif
Publié le 26/01/2023
5
Merci Carl pour ce cours sur les onglets verticaux et horizontaux en JavaScript ! J’ai particulièrement apprécié la clarté de votre explication sur la gestion des événements et la manipulation du DOM pour afficher dynamiquement le bon contenu. L’exemple pratique était top pour bien comprendre la logique et l’appliquer directement. Une approche pédagogique efficace qui donne envie d’expérimenter davantage ! 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 ?

Le code source de l'exercice.
Choisissez votre accès

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
13,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h12 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 769 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)
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 1424 tutos gratuits

Notre politique de protection des données