The objective of my project is to create an interactive hamburger icon that transforms into a cross when clicked, and reverts back to its original state on a second click.
While I have successfully implemented a transition on hover and click through research, I am struggling to achieve the desired outcome. Can anyone offer some guidance or tips?
Update
As requested, you can find a demo here - here Below are snippets of the CSS code related to the transition effect. I attempted using toggle from JQuery to simulate a continuous click but faced challenges. Is this approach advisable for accomplishing my goal?
CSS
.burge:active span {
background-color: rgba(0,0,0,0.0);
transition-delay: .2s;
}
.burger:active span:before {
background-color:#7dcc3d;
transition-property: margin, transform;
transition-duration: .3s;
transition-delay: .3s, 0;
}
.burger:active span:before {
margin-top: 0;
transform: rotate(45deg);
transition-delay: 0, .3s;
}
.burger:active span:after {
background-color:#7dcc3d;
transition-property: margin, transform;
transition-duration: .3s;
transition-delay: .3s, 0;
}
.burger:active span:after {
margin-top: 0;
transform: rotate(-45deg);
transition-delay: 0, .3s;
}