I'm attempting to smoothly open and close my navigation menu.
When the toggle button is clicked, the .responsive
class is either added or removed from the .topnav and .links elements.
My code currently works for the .topnav element, using a height transition for a smooth animation when the .responsive class is toggled.
However, I am facing issues with the .links element. I have tried using transform: translateY(-250px); and top: -250px; for the transition effect.
While these transitions work when the .responsive class is added, there is no animation when the class is removed. How can I resolve this? Thank you.
EDIT: I have tested the code in a JS Fiddle and the basic code is functioning correctly. I will continue to debug my actual code and share the solution once found.
var toggleButton = document.querySelector('.toggle-btn');
var topNav = document.querySelector('.topnav');
var links = document.querySelector('.links');
toggleButton.addEventListener('click', function() {
topNav.classList.toggle('responsive');
links.classList.toggle('responsive');
});.topnav {
background-color: coral;
width: 100%;
height: 65px;
transition: height 300ms linear;
}
.topnav.responsive {
position: relative;
height: 320px;
}
.links {
background-color: lemonchiffon;
position: absolute;
transition: all 300ms linear;
top: -300px;
}
.links.responsive {
transition: all 300ms linear;
top: 65px;
}<div class="topnav">
<span class="toggle-btn">Toggle</span>
<div class="links">
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
</div>
</div>