Transition css, appartition et disparition de mon menu
Bonjour je souhaite mettre en place un effet d'appartition et disparition de mon menu sur mobile en cliquant sur un bouton . J'ai donc utilsé du javascript avec un toggle sur la classe a chaque fois qu'on clique sur le bouton .
Le probleme est que ma transition ne fonctionne que dans un sens. dans l'autre sens, l'element disparait bien mais sans transition.
Quelqu'un aurait il lasolution svp? merci d'avance
CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| nav{
position:absolute;
top:-100%;
left:0;
margin:0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0px;
z-index:3000;
width:100%;
height:100vh;
}
nav.ouvert{
transition: top .3s ease;
top:0;
} |
JAVASCRIPT
Code:
1
2
3
4
5
6
7
| hamburger.addEventListener("click",function(){
nav.classList.toggle("ouvert");
hamburger.classList.toggle("open");
for (let sousItemMenu of sousItemMenuAll) {
sousItemMenu.classList.remove("ouvert");
}); |
