10,00

Tuto Dev. FrontEnd#4 : Réaliser un menu responsive facilement avec CSS, jQuery

10,00

  • Une formation vidéo de 39m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Dev. FrontEnd#4 : Réaliser un menu responsive facilement

ajouter ce cours aux favoris retirer ce cours des favoris

Apprenez à créer un menu responsive complet

J'ai l'immense plaisir de vous proposer ce nouveau tuto vidéo dont la connaissance est une base indispensable de nos jours pour tout développeur Front-End, à savoir la mise en place d'un menu responsive.

Dans ce tuto nous allons voir ce qu'il y a de plus classique, ce que l'on retrouve le plus couramment sur un site Internet :

  • Un menu horizontal pour les grands écrans (type écran d'ordinateur)
  • Un menu hamburger pour les petits écrans (type écran de smartphone)

Pour cela nous utiliserons le CSS 3, notamment les flexbox (je vous invite à suivre mon tuto sur l'apprentissage des flexbox si cela n'est pas déjà fait) et nous utiliserons jQuery (je vous invite à suivre mon tuto sur l'apprentissage de jQuery si cela n'est pas déjà fait).

A la fin de ce tuto, vous serez très à l'aise dans la construction d'un menu responsive !
Je mets à votre disposition le script du tuto. Un QCM vous permettra de tester vos nouvelles connaissances sur le sujet ! Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.

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

    • Présentation du travail gratuit 00:02:01
    • Mise en place du HTML et de la base CSS 00:08:40
    • Création du menu hamburger 1/2 00:06:47
    • Création du menu hamburger 2/2 00:06:41
    • Mise en place du jQuery 00:08:06
    • Conclusion 00:01:45
    • Bonus 00:05:00



Formateur : Carl Brison

Carl Brison a publié 292 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 281 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

4,9
note moyenne

10
avis laissés
5 étoiles
9
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de devfront_45 laissé le 10/02/2023
    Super tuto sur le sujet hamburger. J'ai bien aimé les deux méthodes proposées, soit en display: block; soit en display: flex;. Merci pour la qualité de vos tutos. Validé 100 % DevFrontEnd#4
    "Merci beaucoup pour votre commentaire ;-)"

  • 4
    avis de faboldchap03400 laissé le 14/08/2020
    Merci pour ce tutoriel ! Je trouve dommage : - qu’il n’y a pas de « croix » pour fermer quand le menu est actif - si on clique sur un lien du menu, est-ce que le menu reste visible ? Si oui, comment le gérer ? En Css ou Jquery ? - enfin, pas de conseil pour l’intégration de ce menu burger dans une autre page
    "Je vous ai répondu sur un précédent commentaire. J'ai plusieurs tutos sur le menu burger et certain affichent une croix à la place du menu burger et d'autres non. Le choix est très vaste et les niveaux des tutos ne sont pas toujours les mêmes."

  • 5
    avis de jerome-jc-crea-design laissé le 28/11/2019
    Super ce tuto simple et efficace qui peut-etre résoudre mon problème

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 3, jQuery
  • Que contient le fichier source ?
    Le script du tuto
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1401 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données