Créer un Menu Vertical en CSS

Réaliser un menu vertical réactif
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo incluent :

  • Comprendre la base de la création de menus en utilisant CSS et HTML.
  • Apprendre à transformer des liens en blocs pour une meilleure mise en page.
  • Savoir centrer du texte à l'intérieur de blocs avec la propriété line-height.
  • Maîtriser l'ajout d'effets de survol pour les éléments de menu.

Découvrez comment créer un menu vertical simple en utilisant du CSS et du HTML.

Dans ce tutoriel, nous allons explorer les étapes nécessaires pour réaliser un menu vertical en CSS. Nous commencerons par styliser la liste d'éléments HTML pour qu'elle apparaisse comme un menu. Ensuite, nous transformerons les éléments de lien en blocs pour leur donner la taille adéquate et centrerons les textes à l'intérieur de ces blocs. Enfin, nous ajouterons un effet de rollover pour améliorer l'interactivité du menu.

Voici les étapes que nous suivrons :

  • Suppression des marges et des paddings des éléments de liste.
  • Transformation des liens en blocs.
  • Ajout de styles pour les tailles et les couleurs.
  • Centrer le texte dans les blocs avec line-height.
  • Ajout d'un rollover pour une meilleure interactivité.

En suivant ces instructions, vous serez en mesure de créer un menu vertical efficace pour vos projets web.

Voir plus
Questions réponses
Pourquoi supprimer les puces des éléments de liste dans un menu vertical ?
Les puces des éléments de liste sont supprimées pour donner au menu un aspect plus propre et professionnel.
Quel est l'intérêt de transformer les liens en blocs ?
Transformer les liens en blocs permet de leur donner une taille spécifique et de mieux contrôler leur mise en page et interactivité.
Comment centre-t-on du texte dans un bloc en CSS ?
On peut centrer du texte dans un bloc en utilisant la propriété line-height égale à la hauteur du bloc.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 an
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.