Coder une navigation responsive
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Coder une navigation responsive

Sébastien Imbert
6,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Construction de la navigation
Leçon 2
Responsive et media queries
Leçon 3
Création de l'icône burger
Leçon 4
La méthode toggleClass() en jQuery
Leçon 5
Position fixed et événements au scroll
Leçon 6
Remerciements et bonus

Plan détaillé du cours

Leçon 1Construction de la navigation
09m40s
Leçon 2Responsive et media queries
05m49s
Leçon 3Création de l'icône burger
07m37s
Leçon 4La méthode toggleClass() en jQuery
07m08s
Leçon 5Position fixed et événements au scroll
06m49s
Leçon 6Remerciements et bonus
02m38s

Aperçus

Avis des apprenants

Détail des avis
157
Apprenants
10
Commentaires
4,6/5
Note moyenne
5/5
6
4/5
4
3/5
0
2/5
0
1/5
0
Olivier Plouchard
Olivier Plouchard
Publié le 12/12/2019
Les tutos de Sebastien sont toujours très bons. Merci.
Thomas Delmotte
Thomas Delmotte
Publié le 16/11/2019
Tuto très clair et bien expliqué. Merci beaucoup !
Valérie Arno
Valérie Arno
Publié le 16/09/2018
Bonjour - Excellent ce cours et très complet. Du début à la fin les explications sont claires. Le rythme et le débit de voix, tranquille et pas stressant ;-) Et nous avons pu voir une petite facette de javascript. Le bonus en prime :-) Je suis très contente d'avoir choisi ce cours. Vous êtes un très bon formateur.

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 ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données