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

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

Carl Brison
13,99€
Acheter maintenant, payer plus tard. En savoir plus

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
10m21
Leçon 2Mise en place des onglets
13m33
Leçon 3Mise en place des sections
07m29
Leçon 4Création du code des onglets en JS
07m54
Leçon 5Création du code des sections en JS
05m16
Leçon 6Mise en forme finale
07m45
Leçon 7Conclusion
03m29
Leçon 8Bonus : Notion d'accessibilité
16m36

Aperçus

Avis des apprenants

Détail des avis
27
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.

Payer plus tard

Prix d'achat : 13,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données