JS moderne, EXO #15 - Menu à onglet vertical et horizontal
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

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

Carl Brison
14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Leçon 1Mise en place des zones principales
10m21s
Leçon 2Mise en place des onglets
13m33s
Leçon 3Mise en place des sections
07m29s
Leçon 4Création du code des onglets en JS
07m54s
Leçon 5Création du code des sections en JS
05m16s
Leçon 6Mise en forme finale
07m45s
Leçon 7Conclusion
03m29s
Leçon 8Bonus : Notion d'accessibilité
16m36s

Aperçus

Avis des apprenants

Détail des avis
4
Apprenants
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
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
Le plaisir est là, en effet!
Carl Brison
Carl Brison
Merci beaucoup ;-) !
Alain Tardif
Alain Tardif
Publié le 26/01/2023
Merci Carl pour ce tuto. Les conseils et encouragements que vous donnez sont de vraies pépites, c'est tellement important lorsqu'on débute dans ce métier. Merci pour le bonus final. Validé 100 % EXO#15 JS moderne.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de l'exercice.

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données