Coder une navigation verticale
ERROR
00:00
00:00

TUTO Coder une navigation verticale

Sébastien Imbert
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Leçon 1Préparation des ressources
07m55s
Leçon 2Création du bloc navigation
14m33s
Leçon 3Évènement au clic en jQuery
05m42s
Leçon 4Design de la navigation
14m01s
Leçon 5Animation sur le contenu
07m40s
Leçon 6Création du masque
09m03s
Leçon 7Création du l'icône du menu
07m16s
Leçon 8Animation du l'icône
06m17s
Leçon 9Animation sur les liens
06m09s
Leçon 10Changer de configuration avec un media query et conclusion
06m55s

Aperçus

Avis des apprenants

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

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données