9,00

Tuto Menu burger horizontal avec CSS, JavaScript

9,00

  • Une formation vidéo de 37m52s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Menu burger horizontal

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Carl Brison

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

5,0
note moyenne

6
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de zolb laissé le 29/06/2022
    Extra! Je m'amuse bien...

  • 5
    avis de valerie-a77 laissé le 01/06/2022
    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.
    "De rien Valérie ;-) Passez une bonne journée"

  • 5
    avis de toutkool laissé le 19/04/2022
    Très bon tuto, merci pour cela, qui prend en charge tous les aspects (notamment pour le responsive) et qui est très clair, comme à votre habitude. Une seule petite remarque, vous ne prenez pas en compte le contenu, ce qui est dommage, car une fois qu'on a rajouté ne serait ce qu'un élément en dessous du header (comme une série d'article par exemple) il faut prendre en charge la barre de nav, surtout lorsqu'on est en petite résolution (en dessous de 800px) et qu'on s'aperçoit que le contenu est du coup positionné par défaut très bas.
    "Vous pouvez tenter de désolidariser la Nav en la sortant du flux et en la positionnant au-dessus du content (position:fixed; z-index:100;)"

  • 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
Parcours Developpeur Front End
accédez à plus de 1432 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données