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
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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 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
-
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
note moyenne
avis laissés