TUTO JS moderne, EXO #15 - Menu à onglet vertical et horizontal sur Tuto.com

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

Un cours de

13,99€

5,0

1h12

Débutant

QCM

Certificat de compétences

Fichiers sources

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Présentation
Contenu

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

Leçon 2

Leçon 3

Leçon 4

Leçon 5

Leçon 6

Leçon 7

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

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

Merci Valérie, et vous avez maintenant les capacités d'adapter vos codes, bravo !

Bernard Chabloz

Publié le 29/01/2023

Le plaisir est là, en effet!

Carl Brison

Merci beaucoup ;-) !

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

Merci beaucoup pour votre commentaire très gentil ;-)

Formateur

5

Voir ses cours

Prérequis

,

Débutant

Accessibilité

Sous-titres non disponibles

Ressources téléchargeables

Fichiers sources (140.2 Ko)

Catégories

Programmation JavaScript

Cours publié le 23/01/2023
Langue : Français
ID : 158341

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.