C’est une fonctionnalité que nous rencontrons de plus en plus fréquemment sur les sites Web et les applications mobiles depuis un certain temps: les menus à défilement horizontal.

Fini les menus hamburgers classiques sur lesquels vous devez cliquer pour afficher le menu. La nouvelle norme est le menu « tactile » horizontal que vous faites défiler pour sélectionner votre élément.
Ceci est répandu, en particulier sur les sites Web avec un grand nombre de catégories, telles que: B. Sites Web de commerce électronique ou sites Web de sport.

Ce tutoriel vous montrera comment le configurer un site divi Pas à pas.
Vous pouvez voir le résultat sur la démo, de préférence sur un téléphone. Ce tutoriel s’applique également à tous les autres supports lors de l’ajout d’un grand nombre d’éléments à vos menus:

1 – Ajout d’un module de menu Divi

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

Ajouter un menu divi
Nous ajoutons un menu très simple avec six éléments

Rien n’est très compliqué ici.
La spécialité est que nous lui donnerons un identifiant CSS unique afin de pouvoir ensuite l’adresser précisément via notre code.
Nous ne voulons pas qu’il s’applique à tous les menus du site Web.

Menu CSS du nom d'utilisateur Divi
Nous ajoutons un identifiant CSS personnalisé

Pour ma part, j’ajoute l’identifiant menu-scrollable à mon module de menu dans l’onglet Avancé->ID et classes CSS.

2 – Modification du point de rupture prédéterminé du menu Divi Mobile

La deuxième étape de la configuration de notre menu déroulant horizontal consiste à modifier le point d’arrêt.
Le comportement standard des menus Divi est de créer des menus hamburgers de moins de 780 pixels de large.

menu mobile divi par défaut

Sauf qu’ici, nous ne voulons pas afficher une icône de hamburger ou un menu mobile classique.

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

Si vous souhaitez en savoir plus sur l’utilisation du CSS personnalisé avec Divi, je vous invite à lire notre article 7 façons d’ajouter du CSS à Divi.

Quelques explications sur ce code:

  • ligne 1 : Nous appliquons ce code aux largeurs d’écran jusqu’à 99999px, c’est-à-dire à tous les écrans.
  • Ligne 3 : On force l’affichage du menu standard.
  • Ligne 4 : Nous masquons le contenu qui dépasse de l’écran sur l’axe horizontal.
  • Rangée 6-9 : Nous masquons le menu mobile pour qu’il ne soit jamais affiché.

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

Menu de point d'arrêt changer la division horizontale

3 – Horizontaliser le menu

Notre menu apparaît presque correctement, mais nous devons maintenant l’empêcher d’être emballé.

Pour ce faire, ajoutons le code suivant:

Quelques explications sur ce code:

  • Ligne 3 : Nous appliquons un positionnement plier sur notre menu. C’est un modèle de positionnement flexible très pratique qui peut également être utilisé pour, par exemple Centrer les éléments verticalement. En savoir plus sur Flexbox, Je te recommande la documentation Mozilla.
  • Ligne 4 : la propriété overflow-x nous permet d’aller au-delà du contenu de notre section lorsqu’elle est plus grande. La valeur scroll Affiche une barre de défilement pour le défilement sur l’axe horizontal.
  • Ligne 8 : la propriété flex-wrap : nowrap Forcer les éléments de notre menu à ne pas s’emballer car ils dépassent de leur contenant et restent ainsi sur le même axe horizontal.

Voici ce que cet ajout de code nous donne:

Menu horizontal avec barre de défilement sur Divi

4 – Masquer la barre de défilement du menu

Notre menu horizontal est là, il peut faire défiler, mais il y a un autre petit détail qui doit être peaufiné pour le rendre parfait: cacher la barre de défilement.
Une fois que vous faites défiler vers le bas, une barre apparaîtra en bas.
Ce n’est pas nécessairement esthétique, nous allons donc le supprimer.

Pour ce faire, nous ajoutons le code CSS suivant:

5 – Un petit changement de design

Par défaut, les lignes Divi ont une largeur de 80% dans la section dans laquelle elles sont intégrées.
Pour que l’utilisateur comprenne que le menu dépasse de son contenant, je préfère attribuer une largeur de 100% à cette ligne pour que l’élément coupé soit au bord de l’écran.
Ce code n’est pas obligatoire et est à votre discrétion. Vous pouvez bien sûr le personnaliser à votre goût.

J’ajoute donc le code suivant:

Quelques explications sur ce code:

  • ligne 2 : Nous définissons une largeur de 100% pour notre ligne.
  • Ligne 3 : Nous ajoutons un petit espace de 20px à gauche pour que le menu ne s’affiche pas uniquement sur cette page à l’écran.

Voici la ligne du bas:

Menu résultat div horizontal

Et tout le code à copier et coller:

Conclure

Un effet d’animation efficace sur les sites Web qui ont des menus avec de nombreux éléments qui nécessitent peu de code pour être mis en place.
N’hésitez pas à changer directement le design du module et jouez avec les différentes valeurs CSS du code pour adapter cette fonctionnalité à vos projets.

Envisagez-vous de l’utiliser? Avez-vous des sites Web actuels où ce serait une bonne mise en œuvre?
Dites-nous tout dans les commentaires!



Source link

Recent Posts