Flexbox : menu horizontal CSS33

Publié le par Julien Crego
Mise à jour le

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.

Solution HTML :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

Dans 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.

Solution HTML :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

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 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.

Solution :
<ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

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

Solution :
<ul class="menu">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

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

Ajout de l'arrière-plan et de la bordure
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
}

CSS : Supprimez les marges internes du menu.

Suppression des marges internes
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
}

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

Suppression des puces
Solution :
.menu li {
  list-style-type: none;
}

CSS : Ajoutez une bordures aux liens du menu.

Ajout de bordures sur les liens
Solution :
.menu a {
  border: 1px solid red;
}

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
Solution :
.menu a {
  border: 1px solid red;
  display: block;
  padding: 0.5rem;
}

Positionnement des liens du menu avec flexbox

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

Transformation en flexbox
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
}

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

Répartition des éléments du menu
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

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

Dimensionnement des éléments du menu
Solution :
.menu li {
  list-style-type: none;
  flex-basis: 120px; /* Autre possibilité : width: 120px;  */
  text-align: center;
}

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

Répartition entre les élements
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

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
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

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

Centrage des éléments du menu
Solution :
.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
  justify-content: center;
}

CSS : Espacez les éléments de menu.

Ajout des marges
Solution :

Solution avec une gouttière (recommandée) :

.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

Solution avec des marges :

.menu li {
  list-style-type: none;
  flex-basis: 120px;
  text-align:center;
  margin: 0 0.3rem;
}

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
Solution :
@import url("https://fonts.googleapis.com/css?family=Roboto:400");

body {
  font-family: Roboto, sans-serif;
}
.menu {
  background-color: #999;
  padding: 0;
  display: flex;
  justify-content: center;
}
.menu li {
  list-style-type: none;
  flex-basis: 120px;
  text-align: center;
  margin: 0 0.3rem;
}
.menu a {
  display: block;
  padding: 0.5rem;
  background-color: #aaa;
  text-decoration: none;
  color: #111;
}

CSS : Ajoutez sur les liens une bordures basse.

Ajout d'une bordure
Solution :
.menu a {
  display: block;
  padding: 0.5rem;
  background-color: #aaa;
  text-decoration: none;
  color: #111;
  border-bottom: 3px solid #333;
}

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

Solution :
<ul class="menu">
  <li><a href="#">Accueil</a></li>
  <li><a href="#" class="active">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

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 :

Solution :
.menu a.active {
  color: #00b5a9;
  background-color: #e3fffd;
  border-color: #00b5a9;
}

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

Effet de survol
Solution :
.menu a:hover {
  color: #9e7f02;
  background-color: #f5e49f;
  border-color: #9e7f02;
}

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

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.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

1 Commentaire
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
trackback
Zoo Tickoon 2 - frebourg.es
2 années il y a

[…] Relier le site WordPress à la page d’accueil grâce à un menu flex box. […]

0
Répondre