$ 6.00

Tuto Coder une navigation responsive avec CSS, jQuery

$ 6.00

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

Dans ce tuto vidéo, je vous propose d'apprendre à coder une navigation responsive à l'aide du HTML5, du CSS3, et de jQuery. Le responsive webdesign est aujourd'hui une obligation pour tout site Internet (notamment aux yeux de Google). Elle permet une navigation qui s'adapte à toutes les résolutions (tablettes, smartphones et ordinateurs desktop).

Créer une navigation est un exercice très formateur et permet d'obtenir un résultat rapide. Idéal, donc pour se mettre au CSS ou peaufiner votre technique avec des méthodes actuelles d'intégration.

Au programme de ce tuto coder une navigation responsive

Au cours de cet exercice, nous verrons :

  • comment sur mobiles et tablettes faire apparaitre une navigation via un "menu burger".
  • comment créer un sticky menu (menu qui reste collé dans la partie supérieure de votre navigateur).
  • comment appliquer des nouveaux styles css au scroll. 2 types de présentations du contenu du menu seront abordées dans ce cours.
  • comment gérer les animations d'apparition et de transition.

Nous nous soucierons de l'aspect visuel de la navigation en travaillant son design, et son ergonomie, nous ajouterons des animations et transformations dans la tendance du webdesign actuel à l'aide du CSS3 et de jQuery.

A la fin de ce tutoriel, vous saurez coder une navigation responsive rapidement.

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

    • Construction de la navigation 00:09:40
    • Responsive et media queries 00:05:49
    • Création de l'icône burger 00:07:37
    • La méthode toggleClass() en jQuery 00:07:08
    • Position fixed et événements au scroll 00:06:49
    • Remerciements et bonus 00:02:38



Formateur : Sébastien Imbert

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

4,3
note moyenne

6
avis laissés
5 étoiles
2
4 étoiles
4
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 4
    avis de bader_jonathan laissé le 11/04/2017
    Juste un poil rapide mais merci du tuto
    "Le rythme est assez soutenu oui (c'était mon premier tuto, j'ai corrigé cela par la suite), merci pour l'avis néanmoins ! :)"

  • 5
    avis de keinsha laissé le 11/01/2017
    Bonjour, Bonsoir, j'ai vraiment apprécié ce tutoriel qui m'as encore appris beaucoup de chose dans le css et surtout le petit script Java. J'avait déjà tenté de faire un menu burger avant et je ne suit jamais arrivé à cette finition. Je suit comblé de ce tutoriel et suit ravi d'y mettre un 5/5 ;) . Merci tuto.com

  • 5
    avis de zyrass laissé le 03/09/2016
    Bonsoir, j'ai grandement apprécié ce tutoriel, j'ai d'ailleurs apporté une petite astuce qui peut être utile à tout le monde dans la partie "entraide". Je tiens vraiment à te remercier vu que ce tuto est vraiment très complet. Pour ma part la vitesse ne m'a pas dérangé plus que ça, après j'ai quand même pas mal de base donc ça aide. En revanche l'idée du membre-740-3491 est vraiment très intéressante n'hésite pas. Dans tout les cas j'insiste réellement sur l'acquisition de ce premier tuto. Cordialement.
    "Salut zyrass, merci d'avoir partagé ton astuce, je te créditerai si je m'en sert dans un prochain tuto :). Je suis très content que le tuto plaise aussi aux personnes comme toi ayant de bonnes bases. Merci pour ton avis !"

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


non, je ne veux pas me former gratuitement