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 exo-css33.html contenant la structure de base d’une page web.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</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.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel='stylesheet' type='text/css' href='exo-css33.css' media='all'>
    </head>
    <body>
    
    </body>
</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 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.

Afficher la solution

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.

Afficher la solution

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

Afficher la solution

Solution :

.menu {
  border: 1px solid green;
  background-color: #ccc ;
}

CSS : Supprimez les marges internes du menu.

Afficher la solution

Solution :

.menu {
  border: 1px solid green;
  background-color: #ccc ;
  padding: 0;
}

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

Afficher la solution

Solution :

.menu li {
  list-style-type: none;
}

CSS : Ajoutez une bordures aux liens du menu.

Afficher la solution

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.

Afficher la solution

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.

Afficher la solution

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 :

Afficher la solution

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.

Afficher la solution

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 :

Afficher la solution

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 :

Afficher la solution

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 :

Afficher la solution

Solution :

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

CSS : Espacez les éléments de menu.

Afficher la solution

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 :

Afficher la solution

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.

Afficher la solution

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.

Afficher la solution

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 :

Afficher la solution

Solution :

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

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

Afficher la solution

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

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.

Flexbox : menu horizontal CSS33

Consignes de l’exercice

Laisser un commentaire Annuler la réponse