9,00

Tuto Comment faire un menu burger sans programmation ? avec CSS, HTML

9,00

  • Une formation vidéo de 50m20s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Comment faire un menu burger sans programmation ?

ajouter ce cours aux favoris retirer ce cours des favoris

Vous n'êtes pas fan de la programmation et pourtant vous aimeriez avoir un menu burger sur votre site, lorsque celui-ci a une taille réduite ?
Alors ce tuto en vidéo est fait pour vous.
Je vous propose de faire ensemble une page web, moderne, efficace et 100% responsive, sans jamais faire appel, ni au JavaScript, ni au jQuery et encore moins à la librairie VueJS.

Uniquement de HTML et du CSS et rien d'autre !

Notre projet, réalisé en desktop first, possédera par défaut une barre de navigation horizontale.
En deçà d'un certain point, la mise en forme de la navigation sera modifiée. A la place des liens composant le menu, nous mettrons en place une icône représentant un menu burger. Et lorsque l'utilisateur va cliquer sur cette icône, alors un menu vertical venant de la droite de l'écran viendra couvrir l'ensemble de la page web. Une petite croix permettra à l'utilisateur de fermer le menu.

Pour suivre ce tuto dans de bonnes conditions, il est préférable de connaître Flexbox. Voici un tuto qui vous permettra de maîtriser cette technologie en cas de besoin 

Je mets l'ensemble du code source à votre disposition et je reste disponible dans le salon d'entraide pour répondre à vos questions sur le cours. 
Bonne formation.

Table des matières de cette formation CSS, HTML (durée : 50m20s)

    • Mise en place du HTML 00:06:31
    • Mise en page des trois zones 00:09:43
    • Mise en forme du menu 00:05:40
    • Retour au HTML 00:07:24
    • Apparition / Disparition du menu burger 00:05:05
    • Apparition / Disparition des items du menu 00:05:52
    • Mise en forme de la liste non ordonnée 00:05:58
    • Mise en forme des items 00:02:48
    • Conclusion 00:01:19



Formateur : Carl Brison

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

5,0
note moyenne

11
avis laissés
5 étoiles
11
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de emerson21 laissé le 11/04/2021
    Merci comme d'habitude clair et précis. J'apprécie la diction qui est vraiment cool. Juste dommage il n'y a pas de sous-menu. Je sais que je peux l'obtenir en ligne complet, mais c'est mieux de le coder pour expérience.
    "C'est une très bonne idée pour un futur tuto ! Merci"

  • 5
    avis de arthelys laissé le 08/04/2021
    C'est malin, c'est très clair, c'est rapide à mettre en place et ça fait découvrir et/ou redécouvrir la puissance du CSS ! Encore merci pour ce tuto très bien expliqué !
    "Merci beaucoup, c'est super gentil ;-)"

  • 5
    avis de grandchef laissé le 12/12/2020
    Très clair, merci de votre aide.
    "Merci beaucoup pour votre commentaire ;-)"

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


non, je ne veux pas me former gratuitement

voir notre politique de protection des données