Un menu flexbox responsive

Comment créer un menu flexbox responsive ?

Voici un exemple de menu responsive construit avec flexbox.

See the Pen
flexbox menu/expandable search box/material icons
by yuyazz (@yuyazz)
on CodePen.

Dans ce menu en flexbox, on joue sur l’ordre des éléments et leur visibilité, en fonction de la taille d’écran. Dans le code, le menu est composé d’abord du logo, des éléments de menu, puis du menu burger.

En version mobile :

Le premier élément de menu a une classe « logo ». On le distingue du reste des items de menu avec une classe à part pour pouvoir jouer avec les display: none ou display block sur le menu sans que ça impacte sa visibilité.

Il reste constamment visible et apparaît en premier dans l’affichage, grâce à la proriété order : 0. Si on ne précise pas son ordre et que l’élément suivant commence avec un order : 1, la position du logo sera par défaut à zero. On est donc pas obligé ici de le préciser.

La suite des éléments de menu passent en dernier avec un order 2 et sont cachés avec un display:none . Alors qu’ils sont disposés après le logo dans le code, on les place en dernier après le menu burger. L’astuce consiste donc  à modifier l’ordre des éléments pour créer notre menu responsive.

Le menu burger a comme propriété : order :1 et Il est visible uniquement en version mobile.

Au clic sur ce dernier, les éléments de menu qui ont la classe « menu-item » héritent d’une classe « active » et deviennent visibles.

En desktop

Le logo reste en position 0.

Le burger menu passe en display: none et devient donc invisible.

Le reste des éléments de menu deviennent visibles grâce à un display :block. Ils reprennent leur position naturelle avec un order : 1. 

Pour le reste, j’utilise ici les icônes de google « material icons« , en pseudo-element ou inline. J’ajoute également un champ de recherche rétractable,qui s’ouvre au clic. Le placeholder n’apparaît que lorsque le champ est déroulé. Le code pour ce champs est particulièrement long, car j’ai remarqué qu’en factorisant le code l’effet escompté ne marchait plus…