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.
Table des matières de cette formation JavaScript, CSS (durée : 1h12m)
-
- Mise en place des zones principales 00:10:21
- Mise en place des onglets 00:13:33
- Mise en place des sections 00:07:29
- Création du code des onglets en JS 00:07:54
- Création du code des sections en JS 00:05:16
- Mise en forme finale 00:07:45
- Conclusion 00:03:29
- Bonus : Notion d'accessibilité 00:16:36
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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.
-
Le plaisir est là, en effet!
-
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.
-
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.
note moyenne
avis laissés