C’est une fonctionnalité que l’on croise de plus en plus régulièrement depuis quelques temps sur les sites mobiles et les applications : les menus horizontaux scrollables.

Finis les menus hamburgers classiques sur lesquels il faut cliquer pour afficher le menu, la nouvelle norme est au menu “tactile” horizontal que l’on fait défiler pour choisir son item.
Cela est très utilisé notamment sur les sites ayant de très nombreuses catégories comme les sites e-commerces ou les sites de sport par exemple.

Nous allons voir dans ce tutoriel comment le mettre en place sur un site Divi étape par étape.
Vous pouvez voir le résultat sur la démo, de préférence sur un téléphone. Ce tutoriel est également valable sur tous les autres supports si vous ajoutez un grand nombre d’items à vos menus :

1 – Ajout d’un module menu de Divi

Nous allons utiliser ici le module menu de Divi pour ajouter un menu de catégories à l’une de nos pages.

Rien de bien compliqué ici.
La particularité est que nous allons lui donner un identifiant CSS unique afin de pouvoir le cibler précisément ensuite via notre code.
En effet, nous ne voulons pas forcément que celui-ci s’applique à l’ensemble des menus du site.

De mon côté, j’ajoute l’identifiant menu-scrollable à mon module menu dans l’onglet Avancé->ID et classes CSS.

2 – Changement du point de rupture du menu mobile de Divi

La deuxième étape de la mise en place de notre menu horizontale scrollable est le changement du point de rupture.
Le comportement par défaut des menus de Divi est de devenir des menus hamburgers en dessous de 780px de largeur.

Hors ici nous ne souhaitons pas afficher d’icône hamburger ni de menu mobile classique.

Nous allons donc ajouter le code suivant dans le fichier style.css de notre thème enfant, ou dans l’onglet Apparence->Personnaliser->CSS Additionnel dans l’administration du site.

Si vous avez besoin d’en savoir plus sur l’utilisation de CSS personnalisées avec Divi, je vous invite à lire notre article 7 manières d’ajouter des CSS à Divi.

Quelques explications sur ce code :

• Ligne 1 : nous appliquons ce code à des largeurs d’écran jusqu’à 99999px de large, autant dire tous les écrans.
• Ligne 3 : nous forçons l’affichage du menu standard.
• Ligne 4 : nous masquons le contenu dépassant de l’écran sur l’axe horizontal.
• Ligne 6-9 : nous masquons le menu mobile pour qu’il ne s’affiche jamais.

Notre menu s’affiche maintenant de manière classique, mais n’est pas encore horizontal sur une seule ligne :

3 – Horizontaliser le menu

Notre menu s’affiche presque correctement, mais il nous faut maintenant l’empêcher de revenir à la ligne.

Pour ceci nous allons maintenant ajouter le code suivant :

Quelques explications sur ce code :

• Ligne 3 : nous appliquons un positionnement flex à notre menu. C’est un modèle de positionnement flexible très pratique, que l’on utilise par exemple également pour centrer des éléments verticalement. Pour en savoir plus sur Flexbox, je vous recommande la documentation Mozilla.
• Ligne 4 : la propriété overflow-x nous permet de faire dépasser du contenu de notre section si celui-ci est plus large. La valeur scroll affiche une barre de défilement permettant de scroller sur l’axe horizontal.
• Ligne 8 : la propriété flex-wrap : nowrap force les items de notre menu à ne pas passer à la ligne s’il dépassent de leur container, et ainsi à rester sur le même axe horizontal.

Voici ce que cela nous donne avec cet ajout de code :

4 – Masquer la barre de défilement du menu

Notre menu horizontal est en place, il est scrollable, mais il reste cependant un petit détail à peaufiner pour qu’il soit parfait : masquer la barre de défilement.
En effet dès lors que vous allez le faire défiler, une barre va s’afficher en dessous.
Ce n’est pas forcément esthétique, nous allons donc la supprimer.

Pour ce faire, nous allons ajouter le code CSS suivant :

5 – Un petit ajustement de design

Par défaut, les lignes de Divi ont une largeur de 80% dans la section dans laquelle elles sont intégrées.
Pour que l’utilisateur comprenne bien que le menu dépasse de son contenant, je préfère donner une largeur de 100% à cette ligne afin que l’item coupé soit au bord de l’écran.
Ce code n’est pas nécessaire et reste à votre appréciation. Vous pouvez bien sur l’adapter à vos propres goûts.

J’ajoute donc le code suivant :

Quelques explications sur ce code :

• Ligne 2 : on définit une largeur de 100% à notre ligne.
• Ligne 3 : on ajoute un petit espacement de 20px à gauche pour que le menu ne soit pas collé à l’écran uniquement de ce côté.

Voici le résultat final :

Et l’ensemble du code à copier-coller :

Pour conclure

Un effet d’animation efficace sur des sites ayant des menus avec de nombreux items à mettre en place avec peu de code.
N’hésitez pas à modifier le design du module directement et à jouer avec les différentes valeurs CSS du code pour adapter cette fonctionnalité à vos projets.

Avez-vous prévu de l’utiliser ? Avez-vous des sites en cours sur lesquels ce serait une bonne implémentation ?
Dites-nous tout en commentaires !

Partager