Créer un menu mobile responsive
ERROR
00:00
00:00

TUTO Créer un menu mobile responsive

Adrien Gazaix
6,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS & jQuery nous allons voir ensemble comment créer un menu responsive (menu burger), afin de le rendre compatible avec la version mobile de votre site. Pour cela, nous utiliserons la technique du mobile first qui consiste à créer en premier, le menu pour le mobile et de l'adapter petit à petit pour les écrans plus grands.

A la fin de ce tuto nous verrons une petite astuce pour que la transition du menu mobile/bureau, lors du redimensionnement du navigateur, soit parfaite.

Aucun framework (comme Bootstrap par exemple) ne sera utilisé dans ce tuto, nous ferons tout à la main, pas à pas, pour que vous puissiez rapidement le mettre en place vos prochains sites mobile.

Les fichiers de départ & ceux du tuto terminé sont fournis pour que vous puissiez suivre la vidéo plus facilement.
Je vous invite à regarder l'extrait vidéo pour rendre compte du résultat final.

Bon visionnage !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Rendre le container du site responsive
Leçon 3
Créer & styliser le menu responsive
Leçon 4
Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
Leçon 5
Partie javascript pour créer des actions sur le bouton ainsi que des animations

Plan détaillé du cours

Leçon 1Introduction
02m40s
Leçon 2Rendre le container du site responsive
05m20s
Leçon 3Créer & styliser le menu responsive
12m
Leçon 4Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges
17m23s
Leçon 5Partie javascript pour créer des actions sur le bouton ainsi que des animations
12m32s

Aperçus

Avis des apprenants

Détail des avis
164
Apprenants
14
Commentaires
5/5
Note moyenne
5/5
14
4/5
0
3/5
0
2/5
0
1/5
0
Myriam Chabrun
Myriam Chabrun
Publié le 04/05/2020
clair, complet et utile
Xavier Viacava
Xavier Viacava
Publié le 17/05/2018
Très bonne pédagogie et clarté de compréhension. Le résultat est très satisfaisant. Dernière vidéo ardue pour un débutant...
Membre-8910-3920
Membre-8910-3920
Publié le 07/05/2018
C'est clair et parfaitement expliqué mais je suis frustré du fait que vous n'ayez pas ajouté un logo. Parce je galère pour l'ajouter.

Vos questions sur le cours

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

CSS 2, CSS 3, jQuery 11.1.2, jQuery 1.11.1, jQuery 1.11.0, jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données