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 :

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 :

Vous le voyez en haut à gauche ?

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.

D'autres tutoriels pouvant vous intéresser: