14,00

Tuto JS moderne, EXO #15 - Menu à onglet vertical et horizontal avec JavaScript, CSS

14,00

  • Une formation vidéo de 1h12m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
JS moderne, EXO #15 - Menu à onglet vertical et horizontal

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Carl Brison

Carl Brison a publié 335 tutoriels et obtenu une note moyenne de 4,9/5 sur 19 061 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de valerie-a77 laissé 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.
    "Merci Valérie, et vous avez maintenant les capacités d'adapter vos codes, bravo !"

  • 5
    avis de zolb laissé le 29/01/2023
    Le plaisir est là, en effet!

  • 5
    avis de devfront_45 laissé 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.
    "Merci beaucoup pour votre commentaire très gentil ;-)"

  • 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.
Parcours Developpeur Front End
accédez à plus de 1434 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données