6,00

Tuto Créer un menu mobile responsive avec CSS, jQuery

6,00

  • Une formation vidéo de 49m55s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Créer un menu mobile responsive

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle : Intégrer un menu avec jQuery en 3 exercices pratiques

-29% de réduction

voir les détails du bundle


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 !

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

    • Introduction gratuit 00:02:40
    • Rendre le container du site responsive 00:05:20
    • Créer & styliser le menu responsive 00:12:00
    • Bouton pour ouvrir le menu, icônes vectorielles & adaptation du menu pour les écrans larges 00:17:23
    • Partie javascript pour créer des actions sur le bouton ainsi que des animations 00:12:32



Formateur : Adrien Gazaix

Adrien Gazaix a publié 201 tutoriels et obtenu une note moyenne de 4,8/5 sur 61 378 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

14
avis laissés
5 étoiles
14
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-7228-5288 laissé le 04/05/2020
    Clair, complet et utile

  • 5
    avis de membre-7778-5525 laissé 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...

  • 5
    avis de membre-8910-3920 laissé 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.

  • 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
Parcours Developpeur Front End
accédez à plus de 1408 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données