Dans ce cours en ligne, je vous propose de mettre en place un menu burger qui fera apparaître une zone de navigation horizontale pour les grands écrans et verticale pour les petits écrans.
L'idée sera d'accroître l'expérience utilisateur et pour cela nous irons également manipuler le menu burger en lui faisant faire une rotation sur lui-même pendant que la zone de navigation apparaît ou disparaît de la page web.
Nous modifierons également la représentation du menu burger.
Pour mettre en place ce petit exercice pratique, nous utiliserons les langages Front-end classiques : le HTML, le CSS ainsi que le JavaScript.
Je mets les codes de ce tuto à votre disposition.
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.
Pour aller plus loin, vous pouvez suivre ce bundle dédié à l'apprentissage du JavaScript moderne.
Table des matières de cette formation CSS, JavaScript (durée : 37m52s)
-
- Mise en place du code HTML 00:05:27
- Mise en forme de la barre de nav 00:11:44
- Mise en forme du menu burger 00:04:46
- Ecriture du programme JavaScript 00:05:53
- Donner une rotation à la section 00:08:31
- Conclusion 00:01:31
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl, j'aime énormément ce genre de tuto hyper pratique. Mine de rien, ça ne s'improvise pas, connaître le CSS et savoir l'utiliser sont 2 choses bien différentes. Excellent cours de qualité, validé 100 % #Menu Burger horizontale.
-
Extra! Je m'amuse bien...
-
Un tuto simple mais qui donne de la réflexion avec les classes actives. Une nouvelle façon d'utiliser le menu burger, avec un joli design. Toutes les explications sont là avec une petite dose de JavaScript pour ne pas perdre la main :) Merci Carl.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Que contient le fichier source ?Le code source de ce tutoriel.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés