I'm facing an issue with my hamburger menu, specifically with the icons. Here's how my HTML is structured:
<input type="checkbox" id="check"/>
<header class="IndexHeader">
<nav class="navigation">
<label class="Hamburger" for="check">☰</label>
<label class="schliessen" for="check">⛌</label>
<ul class="IndexNavliste">
a list...
</ul>
</nav>
</header>
I'm trying to achieve a 180-degree rotation effect on my .schliessen label when I click on the .Hamburger label, creating an animation. I attempted to do this using jQuery:
$(".Hamburger").click(function(){
$(".schliessen").css("transform","rotate(180deg)");
});
However, this approach didn't yield the desired outcome. I also realized that I might need to incorporate a transition to make the rotation visible when clicking the label. I experimented with performing this directly in CSS when the checkbox is checked. While this did work, the animation wasn't visible, and my hover effect stopped functioning...
.Hamburger{
display: block;
transition: 500ms;
}
.schliessen{
transition: 500ms;
}
.schliessen:hover{
color: black;
}
#check:checked + .IndexHeader .navigation .Hamburger{
display: none;
}
#check:checked + .IndexHeader .navigation .schliessen{
display: block;
transform: rotate(180deg);
}