I have a question regarding creating a navbar that appears and disappears using JavaScript when clicking on a button element. I've been able to achieve this functionality, but now I would like to add a smooth transition effect to make the navbar appear more gracefully. I'm feeling a bit stuck and unsure of how to proceed.
Apologies if my question is not very clear.
This is an excerpt from my HTML code:
<section class="main-container"> <header class="main-header"></header> <button class="displayer">Click Here</button> </section>Here's my CSS:
.main-container {
width: 100vw;
height: 100vh;
}
.main-header {
width: 100%;
height: 4em;
background-color: black;
position: absolute;
top: 0;
}
And here's the JavaScript snippet I've written:
const remover = document.querySelector(".displayer");
function vanish() {
const navBar = document.querySelector(".main-header");
const display = getComputedStyle(navBar).display;
if (display === "none") {
navBar.style.display = "block";
} else {
navBar.style.display = "none";
}
}
remover.addEventListener("click", vanish);