Dans le cours : L’intégration web : Coder un design en HTML et CSS

Accédez à ce cours grâce à un essai gratuit

Inscrivez-vous aujourd’hui pour accéder à plus de 24 700 cours dispensés par des experts.

Créer un bouton hamburger pour révéler le menu avec le code CSS

Créer un bouton hamburger pour révéler le menu avec le code CSS

Dans le cours : L’intégration web : Coder un design en HTML et CSS

Créer un bouton hamburger pour révéler le menu avec le code CSS

Dans la vidéo précédente, nous avons mis en place le code HTML de notre bouton. Pour rappel, ce bouton est en réalité une case à cocher, case à cocher qui est affublée d'un label, label qui me permet de cocher et décocher cette case à distance. Passons maintenant au code CSS de ce bouton. Et comme d'habitude, petit détour par notre maquette Photoshop. On va aller inspecter ce bouton d'un petit peu plus près. Alors ce bouton est composé de trois rectangles blancs et avec mon outil déplacement ici dans Photoshop, eh bien je vais sélectionner l'un de ces trois rectangles. Comme ça dans le panneau des propriétés eh bien, j'apprends que ce rectangle a une largeur de trente pixels sur une hauteur de quatre pixels. Toujours avec mon outil déplacement, je vais rapprocher ma souris du rectangle sélectionné et je maintiens enfoncé le bouton commande sur Mac ou Control sur Windows. Et là j'apprends qu'il y a une distance de quatre pixels entre chacun de ces rectangles. Dernière petite chose dans…

Table des matières