Un menu sticky (ou menu collant) est un type de menu de navigation sur un site web qui reste fixé en haut de l’écran lorsque l’utilisateur fait défiler la page vers le bas. Autrement dit, peu importe où l’utilisateur se trouve sur la page, le menu reste visible et accessible sans avoir besoin de revenir en haut de la page.
Cela améliore l’expérience utilisateur en facilitant la navigation, surtout sur des pages longues. Le menu sticky est souvent utilisé pour les éléments importants comme les liens de navigation principaux, les boutons d’action ou les filtres dans les pages de recherche.
Il est généralement mis en place à l’aide de CSS et de JavaScript, avec la propriété position: sticky en CSS qui permet de “fixer” le menu lorsqu’il atteint une certaine position lors du défilement de la page.
Voici un exemple de base pour créer un menu sticky en CSS sans utiliser Javascript :
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Sticky</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="sticky-header">
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Bienvenue sur notre site !</h1>
<p>Contenu ici...</p>
</section>
<section id="services">
<h2>Nos Services</h2>
<p>Contenu ici...</p>
</section>
<section id="about">
<h2>À propos</h2>
<p>Contenu ici...</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Contenu ici...</p>
</section>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.sticky-header {
background-color: #333;
color: white;
position: sticky;
top: 0;
width: 100%;
z-index: 1000; /* Pour que le menu reste au-dessus des autres éléments */
box-shadow: 0 4px 2px -2px gray; /* Ombre pour effet de profondeur */
}
.sticky-header nav ul {
list-style: none;
text-align: center;
}
.sticky-header nav ul li {
display: inline-block;
margin: 0 15px;
}
.sticky-header nav ul li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: inline-block;
}
.sticky-header nav ul li a:hover {
background-color: #575757;
}
section {
padding: 100px 20px;
margin: 50px 0;
}
h1, h2 {
text-align: center;
margin-bottom: 20px;
}
Explication :
- Propriété
position: sticky: Cette propriété est ce qui permet à l’élément de “coller” à une position spécifique (ici en haut de la page) lorsque l’utilisateur fait défiler.top: 0;: Cela indique que l’élément (le menu) doit rester collé au sommet de la page lorsqu’on le fait défiler.
- Compatibilité avec Safari : La ligne
position: -webkit-sticky;est incluse pour assurer la compatibilité avec les anciennes versions de Safari. -
Effet visuel : Un
box-shadowest ajouté au menu pour lui donner un léger effet de profondeur lorsqu’il est en position sticky. -
Z-index : Pour que le menu reste au-dessus des autres éléments lors du défilement, on utilise
z-index: 1000;.
Avantages de cette méthode :
- Pas besoin de JavaScript, ce qui rend l’implémentation plus simple et plus rapide.
- Facile à maintenir et à personnaliser avec des règles CSS.
- Prise en charge native par les navigateurs modernes (mais veillez à tester la compatibilité avec les anciennes versions si nécessaire).
Limites :
- Le menu sticky ne fonctionne pas dans les versions très anciennes de certains navigateurs.
- Le comportement peut être un peu imprévisible si le parent du menu a un
overflowou une hauteur définie, donc il faut faire attention aux styles des éléments parents.
Ajouter des animations ou de transitions à un menu sticky
Pour ajouter des animations ou des transitions à un menu sticky, tu peux utiliser les propriétés CSS comme transition, transform et opacity. Voici quelques idées pour améliorer ton menu sticky avec des effets visuels.
1. Changer l’opacité du menu lors du défilement
Tu peux ajouter un effet qui rend le menu plus transparent lorsque l’utilisateur fait défiler la page.
2. Ajout d’une animation de changement de couleur ou d’ombre
Lorsque le menu devient sticky, tu peux lui donner un effet de changement de couleur de fond ou une ombre portée plus marquée pour le rendre plus visible.
3. Ajouter une animation de déplacement (translate)
Tu peux utiliser transform pour créer un effet où le menu se déplace légèrement lorsqu’il devient sticky.
Voici comment implémenter ces effets dans ton CSS :
HTML :
Aucune modification n’est nécessaire dans le HTML.
CSS (style.css) avec animations et transitions :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding-top: 60px; /* Pour éviter que le contenu soit masqué sous le menu */
}
.sticky-header {
background-color: #333;
color: white;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.sticky-header.sticky {
background-color: #222; /* Couleur plus sombre lorsque le menu devient sticky */
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
transform: translateY(-5px); /* Légère remontée */
opacity: 0.95; /* Ajout d'un effet de transparence */
}
.sticky-header nav ul {
list-style: none;
text-align: center;
}
.sticky-header nav ul li {
display: inline-block;
margin: 0 15px;
}
.sticky-header nav ul li a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
.sticky-header nav ul li a:hover {
background-color: #575757;
}
section {
padding: 100px 20px;
margin: 50px 0;
}
h1, h2 {
text-align: center;
margin-bottom: 20px;
}
JavaScript pour activer l’effet sticky :
En utilisant window.onscroll, on va ajouter une classe sticky au menu lorsque l’utilisateur fait défiler la page.
window.onscroll = function() {
stickyMenu();
};
const header = document.querySelector('.sticky-header');
const sticky = header.offsetTop;
function stickyMenu() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
Explication :
- Transition : Dans le CSS, on utilise la propriété
transitionpour animer la couleur de fond (background-color), l’ombre (box-shadow), la position (transform), et l’opacité (opacity) du menu lorsqu’il devient sticky. - Classe
.sticky: Lorsqu’on ajoute cette classe au menu avec JavaScript, elle active des effets comme un changement de couleur de fond, une ombre plus marquée, une translation verticale (transform: translateY(-5px)), et une légère transparence (opacity: 0.95). - JavaScript : On utilise
window.onscrollpour détecter le défilement de la page et ajouter ou supprimer la classestickyau menu en fonction de la position du défilement.
Résultat attendu :
- Le menu aura une couleur de fond qui devient plus sombre lorsqu’il se fixe en haut de la page.
- Une ombre portée plus marquée et un léger décalage du menu pour le rendre plus visible et dynamique.
- Un effet de transparence qui donne un look plus élégant.
N’hésite pas à ajuster la durée des transitions ou les effets de couleur pour personnaliser davantage l’apparence de ton menu sticky !
Et si vous ne pensez pas pouvoir le faire seul, DYNAMIC MARKETING peut vous accompagner !
Appelez-nous pour en parler au 02.47.61.76.62 !
