Currently working on creating a dynamic animation menu using CSS and Javascript, but encountering some issues. The concept involves having a menu with initially hidden opacity (using CSS), which becomes visible when the hamburger menu is clicked, sliding in from the right slightly (powered by Javascript). While the menu slides in properly, upon clicking the X button to close it, the menu does not slide out and the X icon fails to toggle back to the hamburger icon.
Would utilizing a CSS transition instead of an animation be a more straightforward approach?
Below is the code snippet:
let d = document.getElementsByClassName("show")[0];
let f = document.getElementsByClassName("menu")[0];
let o = document.getElementsByClassName("burger")[0];
let p = document.getElementsByClassName("burgers")[0];
d.toggleStatus = "off";
f.onclick = function() {
switch (d.toggleStatus) {
case "off":
d.toggleStatus = "on";
d.setAttribute('style', 'animation-play-state:running');
break;
case "on":
d.toggleStatus = "off';
d.setAttribute('style', 'display:none');
break;
}
o.classList.toggle('rotate');
p.classList.toggle('rotate2');
}.show {
opacity: 0;
animation: menu .3s ease-out;
animation-play-state: paused;
animation-fill-mode: forwards
}
@keyframes menu {
0% {
margin-right: 190px;
opacity: 0
}
100% {
margin-right: 89px;
opacity: 1
}
} <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<div class="menu">
<div class="burger"><img src="https://picsum.photos/50" /></div>
<div class="burgers"><img src="https://picsum.photos/50" /></div>
</div>
<div class="show pt-20 min-w-screen text-center min-h-screen"><a href="#"><span>&Home</span></a><a href="#"><span>About</span></a><a href="#"><span>Work</span></a><a href="#"><span>Contact</span></a>For optimal viewing experience, please access the page in full screen mode.