Flexbox : menu horizontal CSS33

Cet exercice consiste à créer un menu horizontal en CSS en utilisant les propriétés de flexbox pour en disposer les éléments.

Consignes de l’exercice

Mise en place de l’exercice

Créez un dossier de travail (dossier racine) sous le nom exercice-css33.

Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css33.html contenant la structure de base d’une page web.

Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css33.css contenant la structure de base d’une page web. Si vous connaissez le SCSS, utilisez-le.

HTML : Associez le fichier grid-css33.css à la page HTML.

Construction du menu

HTML : En utilisant une liste non-ordonnée, construisez un menu contenant cinq liens.

Vous pouvez utilisez la valeur # pour la référence hypertextuelle des liens. Ainsi, vos liens seront reconnus comme tel par votre navigateur mais lorsque vous cliquerez dessus, il ne se passera rien, vous n’aurez donc pas d’erreur 404 de page introuvable.

HTML : Ajoutez une classe à la liste afin de pouvoir effectuer les réglages du menu en CSS.

CSS : Ajoutez une bordure et une couleur d’arrière-plan au menu.

Ajout de l'arrière-plan et de la bordure

CSS : Supprimez les marges internes du menu.

Suppression des marges internes

CSS : Supprimez les puces présentes sur les lignes du menu.

Suppression des puces

CSS : Ajoutez une bordures aux liens du menu.

Ajout de bordures sur les liens

CSS : Transformez les liens du menu en éléments de type bloc afin qu’ils occupent toute la largeur de la ligne de la liste. Ajoutez leur également une marge interne.

Transformation des liens en blocs

Positionnement des liens du menu avec flexbox

CSS : Définissez la liste comme un élément flexible de type flexbox.

Transformation en flexbox

CSS : Repartissez les différents éléments du menu comme indiqué dans l’illustration ci-dessous :

Répartition des éléments du menu

CSS : Dimensionnez les éléments du menu afin qu’ils aient tous la même taille.

Dimensionnement des éléments du menu

CSS : Modifiez la répartition des différents éléments du menu comme indiqué dans l’illustration ci-dessous :

Répartition entre les élements

CSS : Modifiez encore la répartition des différents éléments du menu comme indiqué dans l’illustration ci-dessous :

Répartition en fin de conteneur

CSS : Espacez les éléments de menu en leur ajoutant des marges latérales.

Ajout des marges

Finition

CSS : Modifiez l’aspect visuel des liens, avec les couleurs de votre choix, pour avoir un résultat identique à l’illustration suivante :

Mise en forme du menu

CSS : Ajoutez sur les liens une bordures basse.

Ajout d'une bordure

HTML : Ajoutez sur un des liens de votre choix la classe active. Nous considérerons que ce lien correspond à celui de la page courante.

CSS : La classe active que vous avez ajouté à la question précédente va maintenant vous permettre de distinguer le lien de la page courante des autres liens. Utilisez donc cette classe pour obtenir le résultat suivant :

CSS : Pour finir, ajoutez un effet de survol sur les liens.

Effet de survol