Question 175227 in Html Question posted in
Some basic documentation can be found here.

How can I add a transition effect to a JavaScript navbar?

I am trying to make a navbar appear and disappear with some JS when clicking on a button element. I managed to do that bit, but I would like to add a transition so that the navbar pops up smoothly. I am a bit confused and don’t quite know where to start.

Sorry if my question is not well formulated.

This is my html bit

<section class="main-container"> <header class="main-header"></header> <button class="displayer">Click Here</button> </section>

My CSS

.main-container {
  width: 100vw;
  height: 100vh;
}
.main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
}

And the bit of JS I wrote

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);
Tags:

3

Answers


  1. 0

    can you also show html codes..

    Login or Signup to reply.
  2. 0

    To add a smooth transition effect when showing or hiding the navbar, you can use CSS transitions along with JavaScript. Here’s an updated version of your code that includes a fade-in and fade-out effect using opacity and transition properties:

    const remover = document.querySelector(".displayer");
const navBar = document.querySelector(".main-header");

function vanish() {
  const display = getComputedStyle(navBar).opacity;

  if (display === "0") {
    navBar.style.opacity = "1";
  } else {
    navBar.style.opacity = "0";
  }
}

remover.addEventListener("click", vanish);
    .main-container {
  width: 100vw;
  height: 100vh;
}

.main-header {
  width: 100%;
  height: 40px;
  background-color: black;
  position: absolute;
  top: 0;
  opacity: 0;
  color: white;
  transition: opacity 0.3s ease;
}
.displayer{
  margin-top: 40px
}
    <section class="main-container">
  <header class="main-header">Header</header>
  <button class="displayer">Click Here</button>
</section>
    Login or Signup to reply.
  3. 0

    You could use a transition and toggle a class that changes opacity and transform.

    const remover = document.querySelector(".displayer");
function vanish() {
  const navBar = document.querySelector(".main-header");
  navBar.classList.toggle('show');
}
remover.addEventListener("click", vanish);
    .main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
  transition: all .5s;
  transform: translateY(-100px);
  opacity: 0;
}

.main-header.show {
  transform: none;
  opacity: 1;
}

html,body{margin: 0}
    <header class="main-header show"></header> 
<button class="displayer" style="margin-top: 5em;">Click Here</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search