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
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
-
-
-
-
-
-
(Verrouillé)
Définir la mise en page générale de l'en-tête grâce aux CSS grids5 m 29 s
-
Créer un bouton hamburger pour révéler le menu avec le code HTML4 m 10 s
-
(Verrouillé)
Créer un bouton hamburger pour révéler le menu avec le code CSS5 m 30 s
-
(Verrouillé)
Transformer le bouton hamburger en bouton de fermeture4 m 19 s
-
(Verrouillé)
Mettre en forme le menu pour les petits écrans5 m 42 s
-
(Verrouillé)
Animer l'ouverture / la fermeture du menu3 m 42 s
-
(Verrouillé)
Ajuster le menu sur les écrans plus larges6 m 33 s
-
(Verrouillé)
Réaliser la mise en page générale du pied de page à l'aide des grilles CSS4 m 34 s
-
(Verrouillé)
Mettre en forme les menus du pied de page4 m 49 s
-
(Verrouillé)
Ajuster la mise en page du pied de page sur les écrans les plus larges.5 m 21 s
-
(Verrouillé)
-
-
-
-
-