I try to leave the menu button into X, when the checkbox toggle is checked, same as when hover over the menu bars. But, it seems like only bar1 can animate and form the X shape, bar2 & bar3 return to their original position. Can anyone help me?
#toggle {
position: absolute;
}
.bar1 {
width: 2rem;
height: 3px;
top: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
}
.bar2 {
width: 2rem;
height: 3px;
top: 50%;
transform: translateY(-50%);
position: absolute;
background-color: #0AF;
transition: ease-in-out 200ms;
}
.bar3 {
width: 2rem;
height: 3px;
bottom: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
}
.btn-menu:hover .bar1,
#toggle:checked+.bar1 {
transform: rotate(45deg);
top: 45%;
}
.btn-menu:hover .bar2,
#toggle:checked+.bar2 {
transform: translateX(50px);
opacity: 0;
top: 45%;
}
.btn-menu:hover .bar3,
#toggle:checked+.bar3 {
transform: rotate(-45deg);
bottom: 45%;
}<body>
<div class="container">
<label class="btn-menu" for="toggle">
<input type="checkbox" id="toggle">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</label>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire