Actuellement, la expérience utilisateur Au sein d'une page web, c'est l'un des éléments les plus importants, tant pour des disciplines telles que le référencement naturel (SEO) que pour améliorer le taux de conversion. Et bien sûr, sur un site web, l'un des éléments les plus importants est le menu, que l'on peut perdre de vue lorsqu'on fait défiler la page. Cependant, on peut mettre en place un menu fixe **qu'il reste toujours dans notre champ de vision.**.
Utiliser un menu « sticky », fixe, adhésif ou collant C'est l'une des pratiques les plus répandues à l'heure actuelle. Chez Euroinnova, nous souhaitons en comprendre les raisons, tout en vous présentant une série d'exemples et de bonnes pratiques afin que vous puissiez intégrer cet élément à votre site web. En effet, comme vous le verrez, il existe des cas où cette pratique n'est pas forcément recommandée.
Vous êtes prêts ? Commençons !
Qu'est-ce qu'un menu « sticky » ?
A menu fixe, menu autocollant o en-tête fixe, il s'agit de la barre de navigation supérieure que l'on retrouve sur n'importe quel site web, à la différence près qu'elle reste visible en haut de la page, même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage de ce type de menu est qu'il garantit un accès continu et rapide aux principales options qu'il propose, quelle que soit la position de l'utilisateur sur la page.
Du point de vue du référencement, le menu fixe est très avantageux car il améliore la accessibilité pour l'utilisateur. Par conséquent, il est normal que de nombreux sites web améliorent des indicateurs tels que le durée de séjour ou le taux de rebond.
Et comment met-on en place un menu « sticky » ? Comme on peut s'y attendre, cela nécessitera des connaissances de base en conception de sites web y CSS. En effet, pour créer un menu « sticky », il faut utiliser la propriété `position: sticky`. Cela dit, comme nous le verrons plus loin, il est possible d'utiliser des constructeurs tels que Elementor o Divi pour le mettre en œuvre dans WordPress.
Exemples de menus autocollants
La première chose que nous allons voir, c'est qu'il existe 3 types de menus « sticky ». Même si l'option consistant à ancrer ce menu en haut de la page est la plus courante, nous proposons d'autres options qui pourraient s'avérer intéressantes pour votre projet ou votre site web.
- Menu adhésif fixe en haut de la page : Comme son nom l'indique, il s'agit de fixer le menu en haut de la page.
- Menu fixe et adhésif sur le côté gauche : Dans ce cas, comme par exemple sur Kayak, il permet aux utilisateurs de modifier leurs critères et de naviguer en fonction de leurs besoins. C'est pourquoi il est généralement placé à gauche.
- Menu fixe collé sur le côté droit : Principalement utilisé sur des blogs tels qu'InVision, il permet à l'utilisateur de parcourir les différentes catégories et de trouver des articles qui l'intéressent.
Sites web où le menu « sticky » est courant
Sur quels sites le menu « sticky » est-il le plus adapté ? Comme nous te l'avons déjà mentionné, il s'agit d'un élément qui améliore l'expérience utilisateur, mais il peut arriver que son utilisation ne soit pas nécessaire. C'est notamment le cas sur les sites web courts, où le menu serait à nouveau accessible d'un simple défilement.
Voici donc les sites web sur lesquels nous vous recommandons d'intégrer ce menu fixe.
Commerce en ligne
Imaginez un instant que vous vous rendiez sur un site de vente en ligne, que vous parcouriez différents produits, que vous en ajoutiez certains à votre panier, mais que vous deviez ensuite revenir au début pour accéder au panier ou changer de catégorie. C'est pourquoi le menu autocollant C'est un atout sur ce type de sites, car cela permet une navigation fluide sans que l'utilisateur ne se sente perdu ou ne perde de vue son panier. Il le verra à tout moment !
Blogs d'actualité ou de tendances
Un autre exemple de site web sur lequel un menu « sticky » s'intègre parfaitement est celui de les blogs et les actualités. Grâce à cette fonctionnalité, l'utilisateur pourra parcourir les différentes catégories une fois qu'il aura fini de lire un article, sans avoir à remonter jusqu'au début de la page.
Pages de services
Les pages présentant les services en détail sont souvent très longues : elles énumèrent ce qui est inclus, comportent des témoignages et d'autres éléments. C'est pourquoi il est préférable de conserver le menu sous la forme d'un élément collant aidera l'utilisateur lorsqu'il souhaitera en savoir plus sur un autre service.
Structure HTML d'un menu « sticky »
Pour créer la structure HTML d'un menu fixe Nous aurons besoin de quelques balises de base, en plus de appliquer des styles en CSS qui permettent, concrètement, au menu de rester à un emplacement fixe lorsque l'utilisateur se déplace sur la page.
Ainsi, la structure doit commencer par une balise pour la barre de navigation. Voici un exemple simple de la structure HTML d'un menu collant :
Pour qu'un menu soit « sticky », il faut également utiliser la propriété position : sticky. De cette manière, nous indiquons au code de maintenir le menu en haut de la page lorsque l'utilisateur fait défiler la page web. Voici un exemple :
.sticky-header {
position: -webkit-sticky; /* Pour les navigateurs WebKit */
position : sticky ;
top : 0 ;
background-color: #fff;
z-index : 1000 ;
}
Bonnes pratiques concernant les menus « sticky »
Nous souhaitons maintenant vous présenter une série de bonnes pratiques à suivre lors de la mise en place du menu « sticky » sur votre site web. Par exemple, il est très recommandé que cette barre de navigation dispose d’un un design simple et minimaliste, sans trop de distractions pour l'utilisateur. Une barre de tête fixe contenant de nombreux éléments et occupant trop d'espace peut s'avérer très gênante, surtout sur les appareils mobiles.
Le menu fixe cela doit être clair, en y incluant des éléments pertinents tels que les rubriques principales ou les liens importants. D'autre part, il est également intéressant de créer un menu qui change de couleur ou se met en évidence lorsqu’il est activé. Ainsi, les utilisateurs l'auront toujours à l'esprit lorsqu'ils naviguent sur le site.
Mettre en place un menu fixe cela peut avoir une incidence sur la vitesse de chargement de la page, c'est pourquoi il est également recommandé d'effectuer des tests de vitesse. Pour résoudre ce type de problème, il peut être utile d'utiliser des outils d'optimisation Web et de vérifier les performances du Menu fixe Éléments o Menu fixe Divi, surtout sur WordPress.
Comment créer un menu fixe dans WordPress ?
Créer un menu fixe dans WordPress C'est beaucoup plus simple que de le faire via le code du site. Il existe aujourd'hui des outils tels qu'Elementor ou Divi, grâce auxquels vous pouvez créer un menu collant sans avoir besoin de connaître le code. Cela dit, une autre façon de créer un menu collant consiste à utiliser les plugins, tels que “ Sticky Menu (or Anything!) ” et “ myStickymenu ”.
Pour mieux comprendre ces informations, voici quelques explications Comment mettre en place un menu dans Elementor. Il te suffit d'ouvrir l'éditeur de page et de sélectionner l'en-tête. Dans l'onglet “ Paramètres avancés ”, active l'option « sticky » et définis certains paramètres, tels que la visibilité et les appareils sur lesquels cette option sera activée.
Une autre façon de créer un menu fixe personnalisé sous WordPress consiste à utiliser du code CSS. Il vous suffira d'appliquer position : sticky à la classe CSS de l'en-tête et définir top : 0 pour que le menu reste en haut de la page.
Español 
English (UK) 
Français