CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 3 - Mettre en page son site internet

Créer un Menu Vertical en CSS

Retour à la formation
Chapitre 2 Leçon 8
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour tirer le meilleur parti de ce tutoriel, vous devriez avoir une connaissance de base de HTML et CSS.

Métiers concernés

Les compétences acquises dans ce tutoriel peuvent être appliquées dans divers métiers du développement web, tels que :

  • Développeur front-end
  • Web designer
  • Intégrateur web

Alternatives et ressources

En plus des techniques présentées, il existe des frameworks CSS tels que Bootstrap ou Bulma qui facilitent la création de menus stylisés.

Questions & Réponses

Les puces des éléments de liste sont supprimées pour donner au menu un aspect plus propre et professionnel.
Transformer les liens en blocs permet de leur donner une taille spécifique et de mieux contrôler leur mise en page et interactivité.
On peut centrer du texte dans un bloc en utilisant la propriété line-height égale à la hauteur du bloc.