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 exo-css33.html contenant la structure de base d’une page web.
Afficher la solutionDans votre dossier racine, créez un nouveau fichier CSS sous le nom exo-css33.css contenant la structure de base d’une page web. Si vous connaissez le langage SCSS, utilisez-le.
HTML : Associez le fichier exo-css33.css à la page HTML.
Afficher la solutionConstruction 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 href
. 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.
Afficher la solutionCSS : 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.
Afficher la solutionPositionnement des liens du menu avec flexbox
CSS : Repartissez les différents éléments du menu comme indiqué dans l’illustration ci-dessous :
Afficher la solutionCSS : Modifiez la répartition des différents éléments du menu comme indiqué dans l’illustration ci-dessous :
Afficher la solutionCSS : Modifiez encore la répartition des différents éléments du menu comme indiqué dans l’illustration ci-dessous :
Afficher la solutionCSS : Modifiez une dernière fois la répartition des différents éléments du menu comme indiqué dans l’illustration ci-dessous :
Afficher la solutionFinition
CSS : Modifiez l’aspect visuel des liens, avec les couleurs de votre choix, pour avoir un résultat identique à l’illustration suivante :
Afficher la solutionHTML : Ajoutez sur un des liens de votre choix la classe active. Nous considérerons que ce lien correspond à celui de la page courante.
Afficher la solutionCSS : 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 :
Sauf mention contraire*, l'article Flexbox : menu horizontal [CSS33] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.
[…] Relier le site WordPress à la page d’accueil grâce à un menu flex box. […]