Ajouter un menu latéral flottant fixe à Divi

par Julien Guiard | 4 décembre 2018 | Tutoriels Divi | 51 commentaires

Un menu latéral flottant fixe peut être un moyen efficace d’attirer l’oeil de vos visiteurs sur un service ou un produit particulier que vous proposez et améliorer ainsi votre taux de conversion.

Nous allons voir ici comment ajouter un menu s’affichant au passage de la souris et renvoyant vers les pages de votre choix comme sur l’exemple ci-dessous :

Voir la démo

Allez, c’est parti !

1re étape : créez le menu en HTML

Nous allons créer le menu à mains nues en HTML.

N’ayez pas peur, ça n’est pas très compliqué.

Voici le code utilisé pour le mien :

<nav class="menu-flottant">
    <ul>
      <li><span><i class="fas fa-cart-arrow-down"></i></span><a href="#">Acheter</a></li>
      <li><span><i class="fas fa-calendar-alt"></i>
</span><a href="#">Réserver</a></li>
      <li><span><i class="fas fa-question"></i></span><a href="#">En savoir plus</a></li>
    </ul>
</nav>

Quelques explications sur ce code si vous n’avez pas de notions de HTML :

La balise <nav></nav> permet de définir un élément comme menu de navigation
Les balises <ul></ul> et <li></li> de créer une liste à puces nous permettant de créer la liste des items de notre menu
la balise <i></i> permet d’intégrer les icônes de la bibliothèque Font Awesome. Si elle n’est pas intégrée sur votre site, je vous explique comment faire dans cet article qui vous montre pas à pas comment ajouter des icônes à vos menus. Vous trouverez la liste de tout ceux proposés par Font Awesome sur leur site.
la balise <a href=”#”></a> permet d’ajouter les liens aux éléments du menu. Pensez à insérer le lien de vos pages dans le code à la place du # pour que tout soit fonctionnel une fois terminé.

Nous avons donc ici 3 items de menu différents, libre à vous d’en ajouter d’autres en suivant le même schéma si vous le souhaitez.

2e étape : utilisez un hook de Divi pour afficher le menu sur toutes les pages

Nous avons le code de notre menu, qui est pour l’instant très simple, mais nous souhaitons l’afficher sur toutes les pages de notre site.

Le plus simple est donc d’utiliser l’un des hooks proposés par Divi pour le faire. De ce fait, il sera ajouté automatiquement au même endroit partout.

Si vous souhaitez en savoir plus sur ce que sont les hooks, vous pouvez vous rendre sur la documentation de WordPress.
Pour connaitre la liste de tous les hooks de Divi, je vous invite à parcourir la documentation Développeur.

Nous allons utiliser ici le hook et_before_main_content permettant d’injecter du code avant le contenu de toutes les pages.

Il va vous falloir ici utiliser un thème enfant puisque le code que nous allons ajouter sera situé dans le fichier functions.php.
Si vous n’en avez pas, je vous invite à télécharger le nôtre.

Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

function add_side_menu() {?>

  <nav class="menu-flottant">
    <ul>
      <li><span><i class="fas fa-cart-arrow-down"></i></span><a href="#">Acheter</a></li>
      <li><span><i class="fas fa-calendar-alt"></i>
</span><a href="#">Réserver</a></li>
      <li><span><i class="fas fa-question"></i></span><a href="#">En savoir plus</a></li>
      
    </ul>
  </nav>
  <?php
}

add_action('et_before_main_content','add_side_menu');

Il reprend exactement le HTML plus haut en l’englobant dans la fonction add_side_menu().
Ceci nous permet de l’injecter partout sur notre site grâce au hook et_before_main_content.

Voila à quoi ressemble notre menu pour le moment :

On ne va pas se mentir, c’est pour l’instant très moche.

On ne va pas se décourager pour autant, nous allons maintenant l’habiller un peu avec du CSS pour qu’il ressemble enfin à quelque chose.

3e étape : un peu de CSS pour améliorer l’apparence de notre menu

Bon, nous avons maintenant notre menu fonctionnel sur toutes les pages de notre site, mais il reste quand même assez moche.

Nous allons donc lui donner un coté un peu plus design en utilisant quelques lignes de CSS.

Voici le code utilisé pour l’exemple avec les explications d’utilisation des propriétés :

.menu-flottant {
    width:14em; /* Largeur des items du menu*/
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:9999; /* Il sera au dessus de tous les éléments*/
    top: 40%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 1em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #fff; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -10em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: #333; /* Couleur de fond*/
    height: 3.5em; /* Hauteur des items du menu*/
    padding: 1em 1.5em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
	background-color: #00aced; /* 1er item du menu*/
} 
.menu-flottant ul li:nth-child(2) { 
	background-color: #e41b1b; /* 2e item du menu*/
} 
.menu-flottant ul li:nth-child(3) { 
	background-color: #4843D2; /* 3e item du menu*/
} 
/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(-10em);
    transform: translateX(-10em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
    color: #FFF; /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:1em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    right: 0.2em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 1em;
  }

Copiez/collez ce code dans le fichier style.css de votre thème enfant et modifiez éventuellement les tailles ou couleurs suivant le design de votre site.

Et voila, votre menu devrait maintenant être pleinement fonctionnel.

Conclusion

Pas mal de code, notamment en CSS, mais rien de bien méchant pour arriver à une fonctionnalité plutôt sympa et originale.

Je vous invite à vraiment essayer de voir à quoi servent les propriétés utilisées et les modifier pour comprendre leur fonctionnement et vous les approprier.

Maintenant que vous avez lu l’article, je peux vous dire qu’il existe le plugin Float Menu qui permet d’arriver au même résultat sans écrire une ligne de code. 😉

N’hésitez pas à nous montrer vos adaptations en commentaires.

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

51 Commentaires

Valérie P. sur 4 décembre 2018 à 08h51 am

Top. Hate d’essayer ça 🙂 Merci pour tous ces tutos !
David sur 4 décembre 2018 à 10h20 am

Super ce tuto, une question.

comment faire pour avoir ce menu que sur certaine page du site.

Merci Julien
Pierre sur 4 décembre 2018 à 12h47 pm

Tu places le contenu de ta fonction entre :
if( is_page( array( ‘about-us’, ‘contact’, ‘management’ ) ) {
// ici le contenu
}
En changeant bien sûr le nom des pages concernées.
Pour en savoir plus.
David sur 4 décembre 2018 à 12h49 pm

Merci julien au top !!!!!!
David sur 4 décembre 2018 à 17h18 pm

Salut,

Encore Moi, pourquoi a ton avis je n’ai pas les icône de panier et autres qui s’affiche sur le menu flottant ?

Manque t’il quelques chose dans mon thème enfant.
Julien sur 4 décembre 2018 à 17h19 pm

Salut, tu as chargé la librairie Font Awesome?
david sur 4 décembre 2018 à 17h20 pm

j’ai mis ça dans mon function.php

// AJOUT DES ICONES FONT AWESOME

function dc_load_fontawesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’, null, ‘4.7.0’ );
}
add_action(‘wp_enqueue_scripts’, ‘dc_load_fontawesome’);
Julien sur 4 décembre 2018 à 17h25 pm

Comme ça ça a l’air bon. Tu as vidé ton cache?
david sur 4 décembre 2018 à 17h28 pm

oui, voici l’url du site en question https://happyo.net dis moi si chez toi tu les as.

Merci
David sur 5 décembre 2018 à 10h11 am

info sur les icônes fontawesone
Pour que les icône apparaissent il a fallut que je modifie les class du code comme ci dessous

Contact
Réserver
En savoir plus

est ce normal a ton avis Julien
David sur 5 décembre 2018 à 10h48 am

désolé de vous solliciter aussi souvent mais je ne comprend pas j’ai ajouter le code avec le test de page comme ma l’a indique Julien mais cela mets le site en erreur 500

voici le code
function add_side_menu() {
if( is_page( array( 13, ‘contacts’, ‘management’ ) ) {
?>

Une question !

<?php
}
}
add_action('et_before_main_content','add_side_menu');

Merci de votre aide.
Julien sur 5 décembre 2018 à 13h53 pm

Salut, tu utilises des icônes de Font Awesome 5 non?
Julien sur 5 décembre 2018 à 13h54 pm

Je pense qu’il doit te manquer un point virgule.
Tu as résolu l’erreur?
DAVID sur 5 décembre 2018 à 14h39 pm

pour font c’est 4.7.0

et non je n’ai pas résolu mon problème
David sur 5 décembre 2018 à 15h04 pm

voici mon dernier code qui ne fonctionne toujours pas

unction add_side_menu() {
console(‘test’);
if( is_page( array( 13, ‘contacts’, ‘management’ ) ) {
$Menu =’

Une question !

‘;
echo $Menu;
}
}
add_action(‘et_before_main_content’,’add_side_menu’);
David sur 5 décembre 2018 à 15h56 pm

Bonjour,

Je m’en suis sorti en testant Id de la page avec un get_the_id()

Merci
Heli sur 27 décembre 2018 à 12h11 pm

Bonjour,

Question toute bête, ou placer le code html ?

Utiliser les liens personnalisés dans apparence, fonctionne-t-il ?

Au plaisir de vous lire 😉

Heli
Julien sur 27 décembre 2018 à 22h54 pm

Bonjour,
comme je l’indique, c’est dans le fichier functions.php de ton thème enfant 😉
Pierre sur 6 janvier 2019 à 10h06 am

Bonjour ,

Merci pour ce super tuto, petite question bête peut être, est il possible que le lien sur le quel les gens cliquent s’ouvre dans une nouvelle fenêtre et non dans la même fenêtre, moi je l’ai utilisé pour mettre les réseaux sociaux, du coup ça quitte ma page..

Et pourquoi pas l’avoir dans un pop up sur cette même page carrément ??

Merci à vous, cordialement.
Pierre sur 6 janvier 2019 à 10h25 am

Et je voudrais aussi le cacher sur mobile comment faire svp ?
Julien sur 14 janvier 2019 à 23h15 pm

Bonjour, pour que le lien s’ouvre dans un nouvel onglet il suffit d’ajouter target=« _blank » dans le lien comme ceci
Julien sur 17 janvier 2019 à 13h13 pm

Bonjour, tu peux ajouter dans ton CSS personnalisé:

@media only screen and (max-width: 640px) {
.menu-flottant {
display: none;
}
}
Quentin sur 7 février 2019 à 11h50 am

Bonjour,

Lorsque j’ai ajouté cette sidebar, j’ai un problème qui est apparu sur ma version mobile. Lorsque je scroll vers la gauche, une “zone morte” apparaît à droite de mon écran. C’est à dire que le site se décale vers la gauche pour laisser place un aplat vertical blanc d’une quarantaine de pixels de large. Quelqu’un aurait-il rencontré ce problème et trouvé une solution ?
Julien sur 11 février 2019 à 22h05 pm

Hello, tu peux nous donner l’URL de ton site stp?
Patrick sur 7 avril 2019 à 15h38 pm

Bonjour

Je viens de découvrir votre site, super, je vais tout regarder avec intérêt.

Aujourd’hui je suis intéressé par le menu.

J’ai repris votre code, et l’ai testé sur 2 sites.

Le code html n’est pas inséré dan sla page, comme si le hook n’existait pas (ce qui ne doit pas être le cas).

J’ai la dernière version de DIVI 3.21.3

Comment vérifier que la fonction dans ‘functions’ est bien prise en compte ?
Julien sur 9 avril 2019 à 00h33 am

Bonjour, tu peux me copier le code que tu as mis dans ton fichier stp?
Patrick sur 9 avril 2019 à 10h04 am

bonjour Julien

mon code:

// AJOUT DES ICONES FONT AWESOME

function dc_load_fontawesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’, null, ‘4.7.0’ );
}
add_action(‘wp_enqueue_scripts’, ‘dc_load_fontawesome’);

function add_side_menu() {?>

Acheter

Réserver
En savoir plus

dans le style.css le css que tu as fourni.

même si le css n’était pas présent, comme sur ton exemple, on devrait voir les 3 items du menu.

En regardant le source de la page affiché, rien n’est inséré.

j’ai l’impression que le hook n’est pas pris en compte. Mon thème est en 3.21.4.
Julien sur 24 avril 2019 à 23h16 pm

Hello, tu intègres les icônes de quelle manière ensuite?
Ava Charpy sur 23 mai 2019 à 11h45 am

Hello ! Super tuto comme d’habitude !
Mais malheureusement, pour moi l’icône ne s’affiche pas.. Ca fait un petit ? et ! qui clignotent.
Je suis sur mon sous domaine le temps de développer le site : https://client.avacharpy.fr/
Pourrais-tu m’aider ?
Merciii !
Pierre sur 24 mai 2019 à 10h24 am

As-tu suivi ce tuto pour savoir comment utiliser les icones de Font Awesome ?
Ava Charpy sur 24 mai 2019 à 11h32 am

Hello Pierre ! Oui oui j’ai tout bien fait comme vous dites (normalement).
Bon j’allais te copier/coller tout mon code mais j’ai quand même testé avec une autre icône de Fontawesome avant… Et miracle, ça marche !
Celle que j’ai sélectionné de base devait être “défectueuse” haha!

Merci en tout cas, j’utilise pas mal de vos tutos sur ce projet : #fannumber1

Belle journée,
Ava
Julie sur 30 mai 2019 à 07h58 am

Hello.

Merci pour ce super tuto ! Quel script puis-je rajouter pour que le menu n’apparaisse qu’au scroll ? (je voudrais éviter de l’avoir sur le header plein écran).
Merci d’avance !

Julie
Julien sur 19 juin 2019 à 19h23 pm

Bonjour, il faudrait ajouter du JS pour faire ce genre d’animation.
ArnoK sur 9 août 2019 à 19h26 pm

Bonjour,
j’ai installé le menu sur un de mes sites et il est super.
cependant il faudrait le redimensionner pour mobile car il masque une partie des textes. Merci
Pierre Bichet sur 9 août 2019 à 19h33 pm

Il te suffit de modifier la valeur de la propriété width en CSS.
Le code fourni à la 3^e étape du tuto est commenté ligne par ligne pour s’y retrouver facilement même si on ne maitrise pas les CSS. 😉
ArnoK sur 14 août 2019 à 11h39 am

Bonjour Pierre et merci pour cette réponse,
En fait je me suis mal exprimé.
Mon soucis est la taille du menu sur le mobile (pas des items lorsque l’on passe la souris) En fait sur le mobile, il faudrait réduire la taille des carrés où s’affichent les icônes car ils masquent une partie du texte de mes pages. je pense que la fonction width gère la taille du texte déployé ? Merci pour le coup de main. cldt
Duhamel sur 15 octobre 2019 à 17h46 pm

Bonjour, Je débute et j’ai réussi à afficher ce menu et à en changer les textes et couleurs. Par contre, les icônes n’apparaissent pas (des rectangles à la place) et je ne trouve pas où définir les liens ?
Pierre Bichet sur 18 octobre 2019 à 08h55 am

Les réponses à tes 2 questions se trouvent dans la première étape du tutoriel. 😉
Si les icones sont manquants c’est que tu n’as pas bien installé la police FontAwesome.
Jim Blug sur 3 décembre 2019 à 23h50 pm

Bonjour, J’utilise WPML pour la traduction de mon site.
Quelle technique me conseilleriez-vous pour traduire ce menu flottant selon la langue choisie ?

merci !
Julien Guiard sur 7 décembre 2019 à 17h52 pm

Bonjour, tu peux utiliser l’addon WPML String Translation pour le faire. Je pense que ça fonctionne.
MIKE sur 29 décembre 2019 à 16h08 pm

Bonjour,
Merci pour ce tutoriel, mais une fois intégrer je remarque quelques soucis que je n’arrive pas a corriger via le css pourriez vous m’aider ?

j’aimerai savoir si je peut un peut plus centré les icônes je trouve que sa fait vide
et ensuite le menu déborde légèrement du site

en gros j’arrive pas à avoir le même rendu que sur votre site de démonstration
Merci de votre aide

mon site : https://deltacoputer.fr
Julien Guiard sur 3 janvier 2020 à 07h56 am

Hello, ton URL ne marche pas?
Julia sur 13 février 2020 à 08h42 am

Bonjour et merci pour ce tuto génial et facile à suivre !! Petite question, j’essaie en vain de remplacer les icône Font Awesome par ceux de la bibliothèque Divi que je préfère. Par example, j’ai remplacé Acheter par Acheter mais clairement c’est faux car aucune icône n’apparaît. Comment dois-je procéder ? Merci d’avance.
Julia sur 13 février 2020 à 09h19 am

Rebonjour. Je souhaiterais aussi savoir comment faire en sorte que le menu n’apparaîsse qu’après mon header. Disons après avoir scrollé environ 30% de la page. Merci d’avance !
Julien Guiard sur 20 février 2020 à 07h47 am

Bonjour, c’est dans ce cas un peu différent car les icônes Divi ne sont pas des images mais une police personnalisée. Il faut donc trouver le code de l’icône qui t’intéresse ici: https://dividezigns.com/divi-icon-codes/
Julien Guiard sur 20 février 2020 à 07h48 am

Bonjour, tu veux ajouter un effet d’apparition c’est bien ça?
michaud sur 27 mars 2020 à 14h20 pm

Bonjour !
Je sais que ce tuto est fais depuis un petit moment, mais je viens de l’utiliser; pour moi ça marche parfaitement par contre quand je laisse actif mon thème enfant je ne peux plus modifier mes modules divi (par exemple pour importer de nouvelle image dans un module), de plus les sauvegardes ne se font plus; il indique ceci en gros : “…. augmenter les variables php… (je peux envoyer un screen si il faut )” enfin un long message d’erreur, du coup je suis oblige de désactiver le thème enfant pour pouvoir retravailler dessus.
Avez vous eu ce genre de problème ?
Merci beaucoup pour votre travail, cordialement
Julien Guiard sur 31 mars 2020 à 22h24 pm

Bonjour, cela n’a rien à voir avec le thème enfant ou le code de cet article, il s’agit plutôt d’une limitation de la mémoire PHP de ton site/serveur. Tu peux contacter ton hébergeur pour qu’il l’augmente. Tu peux lui demander de mettre 512Mo minimum 😉
Sonia sur 2 avril 2020 à 17h05 pm

Bonjour, merci pour ce tuto ! Génial !
Comment peut-on déactiver l’affichage sur mobile car les items masquent des paries de texte ?
merci d’avance 🙂
Pierre Bichet sur 3 avril 2020 à 16h18 pm

La réponse a déjà été donnée dans les commentaires. 😉
@media only screen and (max-width: 640px) { .menu-flottant { display: none; } }
Sonia sur 3 avril 2020 à 18h08 pm

Merci beaucoup. Désolée, j’avais pourtant lu les commentaires avant, gloups… 😳