I'm struggling to figure out how to create a sliding animation for the menu. I want it to slide down and back up when toggled. Any solution or advice would be greatly appreciated!
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
/* CSS styles here */
@media all and (min-width: 480px) {
/* Media query styles here */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<!-- Meta tags here -->
<link href="//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<!-- HTML markup here -->
</body>
</html>I've tried researching tutorials on YouTube, seeking answers on freecodecamp and W3Schools. As someone new to responsive web design, any guidance you can provide would be helpful. Thank you!