Pensez à vos utilisateurs lorsqu'ils visitent votre site internet sur leurs appareils mobiles : leur permettre de fermer votre menu en utilisant le "swap" leur facilitera grandement leur expérience sur votre site, vous aurez ainsi une meilleure expérience utilisateur ce qui augmente vos chances de fidéliser. Découvrons ensemble comment le faire dans cet article !
1ère étape
Débutons par le code HTML.
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar"></div>Les balises de la classe hamburger vont nous permettre de styliser les traits qui font parti de l’icône.
2ème étape
Occupons-nous de la classe hamburger.
.hamburger {
position: absolute;
top: 50px;
left: 35px;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 0.3rem;
margin: 0.3rem 0;
background-color: #e91e63;
border-radius: 5px;
}
3ème étape
Au tour de notre menu !
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 210px;
height: 100vh;
background-color: #e91e63;
transform: translateX(-210px);
transition: all .2s;
}
.sidebar.open {
transform: translateX(0);
}
4ème étape
Détectons le clic sur notre icône grâce à JavaScript.
const icon = document.querySelector('.hamburger');
const sidebar = document.querySelector('.sidebar');
let touchStart, touchEnd;
icon.addEventListener('click', () => {
sidebar.classList.add('open');
});
5ème étape
Il ne reste qu'à récupérer le mouvement du touché de notre utilisateur.
icon.addEventListener('click', () => {
sidebar.classList.add('open');
});
sidebar.addEventListener('touchstart', e => {
touchStart = e.targetTouches[0].clientX;
});Grâce aux événements touchstart et touchmove, nous mettons dans des variables la distance réalisée par le doigt de l’utilisateur.
6ème étape
Calculons pour terminer la distance du swap.
sidebar.addEventListener('touchmove', e => {
touchEnd = e.targetTouches[0].clientX;
});
sidebar.addEventListener('touchend', e => {
if (touchStart - touchEnd > 100) {
sidebar.classList.remove('open');
}
});Si notre utilisateur a “swappé” plus de 100px de distance, nous retirons la classe open de notre menu pour le fermer.
