Coder une navigation verticale
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h25
de formation
10
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Sébastien Imbert
Sébastien Imbert
Formateur

Coder une navigation verticale

4.8/5 Trustpilot (1388 avis) Satisfait ou remboursé
1h25
de formation
10
leçons vidéo
1
chapitre

Il est peut fréquent de croiser une navigation verticale, elles offrent néanmoins un certain nombre d'avantages comme la possibilité d'intégrer un plus grand nombre d'informations, plus de place pour mettre en valeur le logo, et le responsive est plus simple à gérer.

Généralement plus imposant, le design des menus verticaux peut avoir un réel impact sur l'identité d'un site.
Leur utilisation peut se justifier autant sur un portfolio que sur un site vitrine.

Au programme de ce tuto Coder une navigation verticale

Dans ce tuto vidéo, je vous propose d'apprendre à coder une navigation verticale de A à Z, à l'aide de jQuery pour les évènements au clic, mais aussi du CSS3  pour les animations et transformations. 

Voici notamment les notions qui seront abordées au cours de ce tutoriel pour apprendre à coder un menu vertical :

  • comment utiliser le jQuery de manière optimale pour les évènements au clic
  • plusieurs animations et transformations possible grâce au CSS3
  • la création d'un masque cliquable (qui referme la navigation), qui contribue à l'amélioration de l'ergonomie
  • L'animation de l'icône "burger" d'un menu

À la fin de ce tuto, vous saurez coder une navigation verticale, et mettre en place des animations et fonctionnalités qu'on ne pas retrouver sur toutes les navigations.

Je reste disponible dans la section entraide pour répondre à vos questions.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Préparation des ressources
Leçon 2
Création du bloc navigation
Leçon 3
Évènement au clic en jQuery
Leçon 4
Design de la navigation
Leçon 5
Animation sur le contenu
Leçon 6
Création du masque
Leçon 7
Création du l'icône du menu

Table des matières

Leçon 1

Préparation des ressources

07m55
Leçon 2

Création du bloc navigation

14m33
Leçon 3

Évènement au clic en jQuery

05m42
Leçon 4

Design de la navigation

14m01
Leçon 5

Animation sur le contenu

07m40
Leçon 6

Création du masque

09m03
Leçon 7

Création du l'icône du menu

07m16
Leçon 8

Animation du l'icône

06m17
Leçon 9

Animation sur les liens

06m09
Leçon 10

Changer de configuration avec un media query et conclusion

06m55

Aperçus

Avis des apprenants

Détail des avis
257
Apprenants
15
Commentaires
5/5
Note moyenne
5/5
14
4/5
1
3/5
0
2/5
0
1/5
0
Karim Lounici
Karim Lounici
Publié le 26/01/2020
Tutoriel bien mené et très bien réussi malgré la complexité de sa mise en œuvre (surtout en css).
Jean-Pierre Lannak
Jean-Pierre Lannak
Publié le 20/03/2019
Un tuto très agréable à suivre, le résultat est nickel, j'ai bien aimé les appels multiples dans jQuery. Je ne connaissais pas cette manière d'écrire. Je précise pour info que Sébastien code en " mobil first ", ce qui ne gache rien bien au contraire. Merci Sébastien ...
Valérie Arno
Valérie Arno
Publié le 02/11/2018
J'aime beaucoup vos tutos. Ils sont toujours très bien expliqués et dans un rythme facile à suivre. J'ai justement fait un tuto hier sur les animations 2D en CSS. Ça m'a fait une petite révision ;-) Vous nous offrez beaucoup d'astuces. Et ce genre de présentation est très bien pour nos sites. Merci beaucoup Sébastien :-) Par contre je ne vous ai pas trouvé sur facebook.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
11,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h25 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 763 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données