$ 9.00 au lieu de $ 12.00

Tuto Coder une navigation verticale avec CSS, jQuery en promo ! -25% jusqu'au 23 juillet, 19:00

$ 9.00 au lieu de $ 12.00

  • Une formation vidéo de 1h25m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation CSS, jQuery (durée : 1h25m)

(vous pouvez acheter chacune de ces vidéos à l’unité !)
    • Préparation des ressources 00:07:55
    • Création du bloc navigation 00:14:33
    • Évènement au clic en jQuery 00:05:42
    • Design de la navigation 00:14:01
    • Animation sur le contenu 00:07:40
    • Création du masque 00:09:03
    • Création du l'icône du menu 00:07:16
    • Animation du l'icône 00:06:17
    • Animation sur les liens 00:06:09
    • Changer de configuration avec un media query et conclusion 00:06:55



Formateur : Sébastien Imbert

Sébastien Imbert a publié 10 tutoriels et obtenu une note moyenne de 4,9/5 sur 683 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

7
avis laissés
5 étoiles
7
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de graphoeil laissé le 12/05/2017
    Toujours aussi bien, très clair. Je me permets une petite variante dans le jQuery pour les personnes qui aiment comme moi stocker leurs sélecteurs dans des variables ou dans le cas d'éléments crées en jQuery : var $btnBurger = $('#btn-burger'); var $nav = $('nav'); var $liensDirect = $nav.children('a'); var $main = $('main'); var $masque = $('#masque'); $btnBurger.add($overlay).on('click',function(){ $btnBurger.add($nav).add($main).add($overlay).add($liensDirect).toggleClass('open'); }); Merci et à bientôt...

  • 5
    avis de membre-3851-6141 laissé le 10/03/2017
    Tuto très pédagogique Très clair et bien expliqué pour un débutant facile à suivre hâte de voir d autres tutos sur le menu slide horizontal merci
    "Hello, merci d'avoir pris le temps de donner ton avis sur le tuto ! :)"

  • 5
    avis de komarianne laissé le 01/03/2017
    3è tuto avec ce formateur et une fois encore je suis enchantée. Tuto clair et pédagogique, la démarche en deux temps proposée par le formateur est plutôt bien vue (via les outils de développement du navigateur, puis via le code) et du coup très compréhensible et accessible, même pour une "lente à la détente" comme moi :) !
    "Merci une nouvelle fois pour ton avis komarianne (et merci pour celui laissé sur mon profil) :). Je suis très content d'apprendre que ma méthode rende le tuto accessible et compréhensible, j'ai appris, et j'apprend toujours en utilisant les outils du navigateur !"

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 3, jQuery
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1574 tuto gratuits


non, je ne veux pas me former gratuitement