CSS, réalisation simple de menu avec flexbox

Réalisation d’un menu simplement avec Flexbox en css pour vous simplifier la partie fastidieuse de la mise en page de votre site. Flexbox permettra de gérer facilement les espaces, les décallages.

La réalisation d’un menu de navigation est parfois (voir souvent compliqué) en css pour des personnes néophyte comme moi. La gestion des espaces, des décallages entre les éléments du menu peuvent rapidement devenir un casse-tête. En suivant cet article, vous allez découvrir cette propriété qui sera utile pour la mise en page de menu comme pour vos pages en général.

L’agencement d’élément au sein de sa page peut devenir compliqué surtout si l’on recherche un design fluide quelque soit la résolution de l’écran.

La flexbox prend toute sa mesure pour la mise en place d’un fluide design, nous le verrons dans le cas d’un menu de navigation (vous pouvez trouver un exemple sur cette page, je vous invite à suivre ce lien).

Code html

Plutôt qu’un long discours, nous allons passer à la démonstration que nous allons expliquer, pour le code HTML :

<nav>
<ul id="conteneur1">
  <li>premier menu
  <ul id="conteneur2">
    <li>Premier sous-menu</li>
    <li>Second sous-menu</li>
  </ul>
  </li>
  <li>Second menu</li>
  <li>troisième menu</li>
  <li>Quatrième menu</li>
</ul>
</nav>

Les <ul> qui sont des listes non-ordonnés vont nous permettre de hierarchiser notre menu.

Lorsqu’un élément comporte un sous-menu, ce sous-ménu est intégré entre les balises de la ligne (<li></li>).

Code CSS

Aucun difficulté dans le code HTML, maintenant nous allons voir comment mettre en place le code CSS pour bénéficier de la flexbox.

nettoyage de la mise en forme existante

Par défaut, le navigateur apporte une mise en forme aux éléments de votre page web, nous allons commencer à tout supprimer pour partir avec une page vierge (en style) et donner quelques attributs :

li{
  line-height : 30px;
  width : 150px;
  list-style : none;	
  text-align : center;
  position : relative;
}

ul{
  margin : 0;
  padding : 0;
}

Dans l’ordre, on définit la hauteur de ligne, la largeur de l’élément (<li></li>), on enlève le style de la liste (c’est-à-dire les puces), on aligne le texte, et on positionne les ligne en relatif (ceci est très important pour le positionnement des sous-éléments). Enfin, on supprime les espaces et marge des listes appliqués par défaut.

Mise en place de la flexbox

Nous allons voir ici la mise en place de la flexbox sur les deux niveaux de notre menu, nous en profiterons pour voir différents petits réglages.

Sur le premier niveau

#conteneur1{
  display : flex;
  flex-direction : column;
}

Nous mettons la première liste en affichage flex et lui indiquons que nous souhaitons une direction en colonne, ce qui aura pour effet de faire un alignement verticaux des éléments de la liste.

Nous aurions pu choisir :

  • row, pour un affichage horizontal
  • row-reverse, pour un affichage horizontal mais en inversant l’ordre des éléments de la liste
  • column-reverse, pour un affichage vertical en inversant l’ordre des éléments de la liste

Pour gérer les retour à la ligne des éléments , nous pouvons utiliser l’attribut flex-wrap, par défaut, le retour à la ligne en cas de modification de la taille de l’écran se fait sur la ligne inférieur, il peut se faire sur la ligne supérieur avec une valeur de flex-wrap à wrap-reverse.

Je vous invite à tester l’affichage en colonne ou en ligne.

#conteneur1 > li:hover{
  background-color : red;
}

Ce petit bout de code permet de modifier l’affichage de l’élément de premier niveau lorsqu’il est survolé par la souris.

Sur le second Niveau

Afin d’avoir un menu-déroulant, nous cachons les sous-éléments du menu :

#conteneur2{
  display:none;
}

Nous allons le faire apparaître lorsque nous survolons un élément du premier niveau qui possède un sous-menu :

li:hover #conteneur2{
  display : flex;
  justify-content : center;
  position : absolute;
  top : 0px;
  left : 150px;
}

La première ligne permet de signaler que c’est un affichage par flexbox.

La seconde ligne centre le contenu

La position absolute permet de positionner le sous-menu par rapport à l’élément père et l’attribut top et left de positionner le sous-menu.

Une fois cela mis en place, vous voyez apparaître un beau menu déroulant vertical avec des éléments de sous-menus qui sont horizontaux.

Pour l’exemple, voir ce lien.

Conclusion

Vous voilà un moyen de mettre en page rapidement et facilement vos menus et même vos pages, en effet, ces propriétés sont également utilisables pour tous les éléments de vos pages.

Laisser un commentaire

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