$ 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é 3 tutoriels et obtenu une note moyenne de 4,2/5 sur 85 tutoriels vendus. Voir les autres formations de Sébastien Imbert

4,3
note moyenne

4
avis laissés
5 étoiles
1
4 étoiles
3
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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 !"

  • 4
    avis de membre-740-3491 laissé le 02/09/2016
    Salut Sébastien, très bon tuto ! Très bon tuto surtout quand on a déjà des bases globales en html & css & jquery. Même si ce n'est pas obligatoire pour le jquery :) Sinon, cela aurait été pas mal de faire une petite vidéo sur le menu qui se met en mode "burger" avec un scroll down. Sur beaucoup de site, le menu n'est pas fixed au début. Et à un certain niveau du scroll down, il réapparait sous une forme: par exemple un burger. Je pense qu'avec les bases que tu as apportés, y a moyen de le concocter. En attente de nouvelle vidéo de ta part (des indices?) Bisous
    "Salut, je vois de quel genre de navigation tu parles, à vrai dire je n'en ai pas vu souvent, sauf des navigations avec beaucoup de liens (double navs en général), et, au scroll, une partie du menu se met en mode "burger", pour avoir une navigation moins chargée. Pour le prochain tuto, j'ai quelques idées, ce qui est sur c'est qu'il y aura un tuto sur une navigation verticale, avec un peu plus de jQuery et du CSS plus avancé. Merci pour ton avis, à la prochaine, bises. :)"

  • 4
    avis de bluedevil laissé le 31/08/2016
    Sébastien, Un grand merci pour ce tuto où j'ai beaucoup appris. 4 etoiles vs 5 car, comme weaky94, j'ai trouvé que la vitesse était un peu soutenue. A bientôt pour d'autres aventures j'espère !
    "Merci pour votre avis, je prend note concernant la vitesse. À bientôt j'espère aussi !"

  • 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 1557 tuto gratuits


non, je ne veux pas me former gratuitement