Sélectionner une page

Dans cet article, je réponds à un problème que rencontre un membre d’Easyweb Academy. Elle souhaite créer un menu qui s’active lorsqu’on passe le pointeur de la souris dessus à la manière de ce qu’on peut voir sur le site de Dior www.dior.com, DIVI n’offre pas cette fonctionnalité en standard mais avec un peu de CSS, ce n’est pas difficile à faire. Je vous propose une solution ci-dessous.

Voir la démo de la solution.

 

Le problème

Le menu se présente de cette manière à l’ouverture de la page:

4102_screen1

et présente une série de liens lorsque l’on passe le pointeur de souris dessus (hover):

4102_screen2

 

La solution technique

Cette partie concerne les membres d’un niveau avancé qui maîtrisent les bases du CSS et veulent comprendre la solution technique. Les autres peuvent passer directement à la partie “Utilisation”

 

Faire apparaître et disparaître les textes

Nous allons utiliser un module texte dans lequel nous allons créer un header en h1 qui sera affiché dans l’état normal et caché dans l’état hover. Le reste du contenu du module texte sera caché par défaut et affiché seulement dans l’état hover. Pour cacher les éléments nous utilisons un simple display:none.

Cela permet à des non informaticiens de définir ce qui doit apparaître et disparaître en fonction du hover sans leur demander de créer des div.

Pour éviter que la taille du module texte change selon le contenu affiché, on lui impose une hauteur, par exemple height:200px, et on lui impose de prendre la largeur de sa colonne container avec width:100%.

4102_screen8

Ne pas afficher le menu sur les mobiles

Le hover ne fonctionne qu’avec un pointeur de souris, et donc ne fonctionne pas sur les mobiles. Il nous faut donc faire disparaître ce menu sur les mobiles et le remplacer par un autre.

La première idée est d’utiliser la fonction de désactivation du builder DIVI mais hélas, elle ne repose que sur la largeur de l’écran. Il est donc possible d’avoir des appareils sans souris comme des tablettes qui ont un écran suffisamment grand pour entrer dans la catégorie “desktop” au sens DIVI.

4102_screen3

Par chance il est possible d’utiliser un système plus fiable car DIVI ajoute une classe “et_mobile_device” au body lorsqu’un mobile est détecté au chargement de la page. C’est ce que nous allons utiliser dans cette solution en créant une classe “ewa_hide_on_mobile” qu’on appliquera au module pour le faire disparaître sur les mobiles.

 

Centrage vertical

Comme vous le savez, le centrage vertical est un cauchemar en CSS. Au lieu d’utiliser les bidouilles habituelles, je vous propose d’utiliser le nouveau modèle de boite Flexbox du CCS3 bien plus propre. Cela se concrétise par la classe utilitaire « ewa_vertical_center » qu’on applique au module.

Pour plus d’infos voir CSS 3 flexbox : Plongez dans les CSS modernes

Ressources

CSS commenté

/****** mecanique du menu **************/
/* cache les éléments */
.ewa_menu_hover:hover h1, .ewa_menu_hover * {
 display:none;
}

/* montre les éléments */
.ewa_menu_hover h1, .ewa_menu_hover:hover * {
 display:block;
}


/********* formatage du texte dans le module *******/
/* retire la marge interne appliquée par défaut aux paragraphes dans DIVI */
.ewa_menu_hover p {
 padding-bottom:0px;
}

/* souligne les liens du menu lorsqu'on passe le pointeur dessus */
.ewa_menu_hover a:hover {
 text-decoration:underline;
}

/* impose la couleur de corps de texte aux liens */
.ewa_menu_hover a {
 display:block;
 color:inherit;
}


/******** classes utilitaires **************/
/* classe pour cacher un élément sur les mobiles */
body.et_mobile_device .ewa_hide_on_mobile {
 display:none;
}

/* classe pour cacher un élément sur les desktops */
body:not(.et_mobile_device) .ewa_hide_on_desktop {
 display:none;
}

/* classe pour centrer verticalement le contenu */
.ewa_vertical_center {
 display: inline-flex; /* centrage vertical par Flexbox */
 flex-direction: column;
 justify-content: center;
}

Fichier module DIVI

Menu hover

Vous devez être membre pour télécharger le fichier. Connectez-vous ou inscrivez-vous

Utilisation

Installation

  1. Téléchargez le fichier « 4102 Menu Hover », il content un module Texte DIVI
  2. Chargez ce fichier dans votre bibliothèque DIVI. Cliquez ici pour plus des explications détaillées.
  3. Dans la ligne dans laquelle vous voulez le menu, cliquez sur « Insérer module/s »

 

4102_screen9

puis “Ajouter de la bibliothèque” et enfin choisissez le “Menu hover”:

4102_screen10

4) Copiez le code CSS fourni, optionnellement compressez-le avec un CSS minifier,  puis ajoutez-le dans le code CSS de la page en cliquant sur le « hamburger ». Cliquez ici pour plus d’explications.

Si vous voulez utiliser le menu hover dans plusieurs pages, plutôt qu’insérer le code CSS dans chaque page, insérez-le une fois au niveau site avec le menu DIVI > Options du thèmes > Général > Personnaliser CSS.

 

Paramétrage

 

 

 

 

Pin It on Pinterest