Dans ce cours en ligne destiné à améliorer le côté front des pages web, nous allons mettre en place un menu burger.
Ce menu activera l'apparition verticale d'une zone de navigation lorsque l'utilisateur cliquera dessus. Cette navigation recouvrera intégralement notre page. Ce menu burger restera à l'écran tant que l'utilisateur n'aura pas décidé de le refermer.
Nous devrons donc gérer les différents états d'affichage du menu, mais également de l'icône burger.
Ce qui est intéressant et important ici, c'est d'acquérir la bonne logique de construction de ce classique du front end.
Pour suivre ce tutoriel vidéo dans de bonnes conditions, il est recommandé de connaître :
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Table des matières de cette formation JavaScript, CSS (durée : 53m32s)
-
- Mise en place des zones principales 00:08:01
- Mise en fonctionnement de la zone Nav 00:08:31
- Mise en place du menu burger 00:08:18
- Mise en fonctionnement du menu burger 00:07:48
- Une autre façon d'aborder notre programme 00:05:30
- Mise en place des liens de navigation 00:11:26
- Côté responsive 00:02:05
- Conclusion 00:01:53
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Cela permet de revoir css flexbox
-
Tuto sympa pour donner un préambule mais quelques défaut (à mon avis bien sur), déjà, le fait de donner la classe active au body n'est pas à mon gout, trop d'éléments peuvent du coup en dépendre, pour ma part je préfère cibler un élément bien précis, aussi et là c'est plus de la cosmétique, votre solution pour du "responsive" est très très minimaliste, un affichage en column avec un flex-direction sur le UL, au travers d'une media query aurait été peut être plus approprié plutôt que garder ça en ligne, surtout pour un affichage sur une résolution qui s'apparente à celle d'un mobile, enfin question de goût. Merci en tout cas.
-
La double approche (direct ou parent) est instructive. La progression pédagogique est agréable et claire. Cependant, toutes les fioritures sont assez lourdingues pour la maintenance et procure une expérience utilisateur contestables. De plus, un menu occultant comme proposé est assez déconcertant et peu vraisemblable en production.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés