Depuis longtemps, Divi propose un menu plein écran parmi ses diverses options d’affichage du header.
Néanmoins, cette mise en forme est plutôt limitée car elle se contente d’afficher le menu sélectionné ainsi que les éventuelles infos présentes dans la barre supérieure.
Dans ce tutoriel, je vous propose donc une méthode qui vous permettra de créer, avec le Theme Builder, un menu plein écran sur-mesure avec le contenu de votre choix.
Comme vous pouvez le voir sur la démo, ce type de menu fonctionne bien avec une navigation comptant peu de liens. Il est donc plutôt à utiliser sur des sites ayant une hiérarchie assez simple.

Le principe général

Voici un aperçu dans les grandes lignes de la manière de procéder pour créer notre menu en plein écran avec Divi.

• on créé un template de header global avec le Theme Builder
• dans ce template :
  • on ajoute une première section avec un module Bouton qui servira à afficher et masquer le menu plein écran
  • on insère une seconde section qui contiendra les éléments de notre menu plein écran, avec bien sûr au minimum un module Menu que nous redisposerons en vertical
• du JavaScript nous permettra :
  • d’afficher et masquer notre menu plein écran au clic sur le bouton dédié
  • de remplacer dans le bouton l’icone de hamburger par un icone de croix
  • de supprimer la possibilité de faire défiler la page quand le menu est affiché
• du CSS nous permettra de styler diverses parties du menu et d’animer son apparition

Préparez le template de header

Rendez-vous dans le Theme Builder et cliquez sur “Ajouter un en-tête global”, puis sélectionnez “Construire l’en-tête globale”.

Insérez ensuite 2 sections :

• La première contiendra le bouton servant à afficher et masquer le menu.
  Insérez dans cette section une ligne d’une seule colonne.
• La seconde section accueillera le contenu du menu plein écran.
  Insérez dans cette section une ligne du nombre de colonnes de votre choix.

Paramétrez le bouton de menu

Dans la première section, ajoutez un module Bouton.
Graphiquement, vous êtes libre de lui appliquer les styles de votre choix ; vous devez juste lui attribuer les réglages suivants.

Texte

Dans Contenu -> Texte -> Bouton, précisez l’intitulé “Menu” (ou autre chose, mais je ne vois pas trop quoi…).

Alignement

Dans Style -> Alignement -> Alignement des boutons, sélectionnez l’alignement à droite.

Bouton

Dans Style -> Bouton, activez “Utiliser des styles personnalisés pour bouton”.
Parcourez la liste de paramètres pour aller activer “Bouton icone”, puis sélectionnez l’icone qui vous convient.
Nous le modifierons plus tard en JavaScript pour qu’il devienne une croix (ou autre chose) lorsque le menu est affiché.

ID et classes CSS

Dans Avancé -> ID et classes CSS -> ID CSS, précisez btn_show_menu comme identifiant CSS.
Ceci permettra de cibler le bouton dans la fonction JavaScript.

Affinez les réglages de la première section et de la ligne

Dans les paramètres de la première section

Affichez les réglages de la section qui contient le bouton de menu et rendez-vous dans Style -> Espacement pour définir la marge interne haute et basse sur 0px.

Puis dans Avancé -> Poste, définissez une position fixe afin que le bouton de menu reste toujours positionné en haut à droite de l’écran :

• Poste : choisissez la position Fixed
• Location : cochez l’angle en haut à droite
• Z Index : précisez 1100

Dans les paramètres de la ligne de cette première section

Allez dans Style -> Dimensionnement, précisez 100% pour les 2 champs “Largeur maximale” (erreur de traduction, le premier correspond à la largeur tout simplement).

Dans Style -> Espacement, il s’agit maintenant d’éloigner un peu le bouton du bord de la page en ajoutant une marge interne à la ligne.
Utilisez la valeur que vous souhaitez pour les champs “Sommet” et “Droite”.
Précisez juste 0px pour le champ “Bas” afin de minimiser la hauteur de la ligne.

Paramétrez le menu plein écran

Dans les paramètres de la seconde section

Afin de mieux visualiser vos modifications, je vous suggère de commencer par attribuer une couleur de fond à cette section.
Vous pouvez même imaginer utiliser une image de fond, un motif, etc.
Pour ma démo, j’ai appliqué une couleur de fond à la section dans le Divi Builder, puis utilisé une astuce CSS avec un dégradé pour obtenir les lignes verticales qui se répètent.

Vous pouvez vous amuser avec le code ci-dessous pour arriver au rendu qui vous intéressera :

Dimensionnement

Tout d’abord, allez dans Style -> Dimensionnement pour attribuer à la section une largeur de 100% et une hauteur de 100vh.
Ceci afin que notre menu soit bien un menu plein écran.

ID et classes CSS

Dans Avancé -> ID et classes CSS -> ID CSS, attribuez l’idenfiant CSS menu_fullscreen à la section.
Celui-ci nous permettra ensuite de cibler cette section en JavaScript.

Visibilité

Puis dans Avancé -> Visibilité -> Débordement vertical , sélectionnez “Auto”.
Ceci afin que, si le contenu du menu est plus long que la hauteur de l’écran, une barre de scroll apparaisse et permette de faire défiler le menu.

Position

Enfin, dans Avancé -> Poste, définissez une position “fixed” (1), en sélectionnant l’angle en haut à gauche (2) et en précisant un z-index élevé (3).
Ainsi, le menu plein écran restera bien en place par-dessus les autres éléments de la page.

Si vous souhaitez centrer verticalement le contenu de votre section, reportez-vous à mon article Centrer du contenu verticalement sur Divi.

Dans les paramètres de la ligne

Dimensionnement

Tout dépend de la manière dont vous souhaitez mettre en forme votre menu plein écran, mais dans Style -> Dimensionnement vous pourriez avoir besoin d’activer “Harmoniser les hauteurs des colonnes”.

Afin de donner plus d’ampleur au menu plein écran, il est également judicieux d’augmenter la largeur de la ligne sur 100%.
Pensez à ajuster les valeurs dans les onglets pour “Tablette” et “Téléphone”, sur 85% ou 90% par exemple.

Si votre mise en page nécessite que vos colonnes se permutent sur les petits écrans, vous pouvez lire mon tutoriel Inverser l’ordre des colonnes sur mobile.

Configurez le module Menu

Vous pouvez styler votre menu comme vous l’entendez. Je vous donne ci-dessous juste quelques réglages minimum à effectuer.
Et oui, nous partons d’un menu horizontal, mais vous verrez un peu plus bas que seules quelques lignes de CSS suffisent pour redéfinir le menu en version verticale.

Contenu

Commencez par sélectionner le menu de votre site que vous aurez préalablement créé dans l’administration de WordPress (Apparence -> Menu).

Fond

Par défaut, le module Menu comporte un fond blanc.
Si vous souhaitez en changer ou le supprimer, rendez-vous dans Contenu -> Fond.

Modèle

Dans Style -> Modèle, ne faites aucun changement.

J’en profite pour rappeler qu’un menu plein écran fonctionne généralement bien qu’avec peu d’éléments de menu.
Une hiérachie complexe impliquant un menu déroulant est donc à éviter.
Je ne dis pas là que c’est impossible bien sûr, mais cela nécessitera un travail supplémentaire d’adaptation pour intégrer les sous-menus.

ID et classes CSS

Cet identifiant CSS, à ajouter dans Avancé -> ID et classes CSS -> ID CSS va servir à cibler le menu afin de le mettre en forme en CSS.

Le JavaScript

Une simple fonction jQuery va nous permettre d’afficher et masquer le menu plein écran au clic sur le bouton dédié à cet effet.

Ajoutez le code ci-dessous dans les options de Divi -> Intégration -> Ajouter ligne de code à la < head > de votre blog.

Si vous souhaitez en savoir plus sur l’utilisation de jQuery avec Divi, reportez-vous à notre article Comment ajouter du code jQuery dans Divi.

Détaillons ce code

• Ligne 2 : lorsque la page est chargée…
• Ligne 3 : au clic sur le bouton comportant l’identifiant CSS #btn_show_menu :
  • Ligne 4 : on annule le comportement par défaut du bouton (le lien qui est censé nous emmener vers une nouvelle page)
  • Ligne 5 : on ajoute/retire la classe .active_menu au bouton (ce qui nous permettra de changer son icone)
  • Ligne 6 : on ajoute/retire la classe .visible_menu à la section servant de menu plein écran et comportant l’identifiant CSS #menu_fullscreen
  • Ligne 7 : on ajoute/retire la classe .no_overflow au body afin de désactiver le défilement de la page lorsque le menu est affiché

Les règles CSS

Vous pouvez ajouter les règles CSS que je vais vous donner dans les options du thème ou même du template, ou encore dans le fichier style.css si vous utilisez un thème enfant.

Pour en savoir plus sur l’utilisation des CSS dans Divi, vous pouvez lire mon article 7 manières d’ajouter des CSS à Divi.
Et si vous vous posez des questions sur les thèmes enfants : Tout savoir sur les thèmes enfants pour Divi.

Stylez le menu de navigation

Passez le menu en vertical

Tout d’abord, afin de terminer la mise en forme de notre menu, il nous faut le passer en vertical.
Voici donc les lignes de CSS qui seront nécessaires.

Lignes 9 et 14, vous pouvez ajuster les valeurs selon vos besoins. Celles-ci correspondent à l’espacement entre les liens du menu pour diverses tailles d’écrans.

Désactivez le menu mobile

Et oui, en-dessous d’une certaine largeur d’écran (980px par défaut), le menu de Divi passe en version mobile et affiche un simple icone d’hamburger.
Pour éviter ça, utilisez les CSS suivantes.

Bonus : ajoutez un séparateur

Si, comme dans ma démo, vous souhaitez ajouter un filet de séparation entre les liens du menu, utilisez les CSS ci-dessous.

• Ligne 5 : définissez la couleur du filet
• Ligne 6 : modifiez l’épaisseur du filet
• Lignes 7 et 13 : ajustez la marge selon l’espacement présent entre vos liens de menu, pour diverses tailles d’écrans

Stylez le menu plein écran

Les attributs par défaut du menu plein écran

Ces règles CSS définissent les propriété de la fenêtre de menu lorsqu’il est masqué.

• Ligne 1 : on cible notre menu uniquement sur la classe et-tb est absente du body, ce qui signifie que le Theme Builder est inactif ; ainsi notre section reste bien accessible pour travailler dessus en live avec le Divi Theme Builder.
• Ligne 2 : on précise un z-index élevé afin que le menu s’affiche bien par-dessus les autres éléments de la page.
• Ligne 3 : on définit la visibilité sur “caché”.
  Petite précision : on n’utilise pas la propriété display:none car celle-ci retire un élément du DOM. Alors qu’ici nous souhaitons seulement masquer notre élément jusqu’à ce qu’on décide de le rendre visible.
• Ligne 4 : l’opacité doit être réglée sur 0 (soit complétement transparent).
  Cette propriété fonctionne conjointement avec la précédente, ceci afin de pouvoir manipuler la visibilité de l’élément en JavaScript.
• Lignes 5 à 7 : on effectue une translation verticale négative d’un écran et demi.
  Vous pouvez ajuster celle valeur, mais elle doit bien évidemment être supérieure à 100vh.
  Et bien sûr, libre à vous de choisir d’effectuer à la place une translation horizontale ou un fondu, etc.
• Lignes 8 à 10 : on ajoute une transition pour fluidifier l’effet entre l’état invisible et visible (et inversement).
  

Les attributs du menu plein écran visible

Pour finir, on ajoute les règles CSS qui permettrons d’afficher le menu plein écran et qui s’activent en même temps.

• Ligne 1 : même restriction que précédemment concernant la visibilité de la section quand le Theme Builder est actif.
• Ligne 2 : on passe la visibilité sur visible.
• Ligne 3 : on rétabli l’opacité sur 1 (soit complètement opaque).
• Lignes 4 à 6 : on réinitialise la translation (ou toute autre transformation que vous avez choisie).
• Lignes 7 à 9 : on ajoute une transition pour fluidifier l’effet entre l’état invisible et visible (et inversement).
• Lignes 13 : on remplace l’icone du menu par une croix (plus d’infos sur la police d’icones de Divi).
• Ligne 17 : on désactive la possibilité de faire défiler la page.

Le mot de la fin

Et voila, vous savez désormais créer un menu plein écran personnalisé avec Divi et en utilisant le Theme Builder.
Maintenant, vous avez toutes les cartes en main pour concevoir de superbes menus avec les modules de votre choix.
Dans ma démo, j’ai présenté un exemple d’insertion d’une actualité, mais vous pouvez également envisager d’ajouter des coordonnées, un formulaire, un plan d’accès…

Enfin, n’hésitez pas à poster en commentaires vos sites Divi sur lesquels vous avez réalisé un menu plein écran en suivant ce tutoriel.

Partager