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 !
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.
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;
}
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);
}
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');
});
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.
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.