$ 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é
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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é 90 tutoriels et obtenu une note moyenne de 4,7/5 sur 23 409 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

8
avis laissés
5 étoiles
8
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de py-ro laissé le 03/12/2016
    Toujours aussi bon !!

  • 5
    avis de superfrenchboy laissé le 09/03/2016
    Très bon tuto. Facile à suivre et pleins de petites astuces. Exellent !
    "Merci de ton retour ! Et n'hésite pas à me montrer le résultat sur ton site :)"

  • 5
    avis de Hoppipolla laissé le 03/03/2016
    Excellent tuto, comme toujours. Merci Adrien, tu m'as fait gagner du temps :)
    "Merci Mylène c'est sympa de laisser un com ;) je viens d'aller voir ton site et il est bien intégré, bravo !"

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 2, jQuery 11.1.2, jQuery 1.11.1, jQuery 1.11.0
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1557 tuto gratuits


non, je ne veux pas me former gratuitement