I'm making a navigation bar and having problem hiding the button that shows the navigation until it's totally disappeared.

screen : https://i.stack.imgur.com/pv6wk.png

my code :

function show(){
    var nav = document.getElementsByClassName("navigation")[0];
    var phone_button = document.getElementsByClassName("button-phone")[0];
              
    nav.style.transform = "translateX(0)";   
    phone_button.style.opacity = "0"           
}

function hide(){
    var nav = document.getElementsByClassName("navigation")[0];
    var phone_button = document.getElementsByClassName("button-phone")[0];
    
    nav.style.transform = "translateX(-100%)";
    phone_button.style.opacity = "1"

}

CodePudding user response：

You can use the transitionend event and hide the Button in an eventlistener

CodePudding user response：

You can use z-index property for .navigation instead of using opacity for phone_button. in CSS file you set z-index:10; for .navigaion class.

Besides that, it's better to set the property in one class in CSS and after clicking on phone_button just toggle this specific class for navigation

You can do like this:

const btn=document.querySelector(".menuBtn");
const nav=document.querySelector('.navigation');
const closeBtn=document.querySelector('.closeBtn');

btn.addEventListener('click',function(){
  nav.classList.add('show');
})

closeBtn.addEventListener('click',function(){
  nav.classList.remove('show');
})

*{
  margin:0;
  box-sizing:border-box;
}
.container{
  position:relative;
   display:flex;
}
.navigation{
  position:absolute;
  width:200px;
  height:100vh;
  background-color:#e45;
  transform:translateX(-100%);
  transition:transform 0.5s;
    z-index:10
}

.navigation.show{
  transform:translateX(0)
}

li{
  list-style:none;
  margin:0;
}

a{
  text-decoration:none;
  color:white;
  padding:0.3rem 1rem;
  margin-top:0.5rem;
  display:block;
}

.closeBtn{
  cursor:pointer;
  color:white;
  padding:1rem;
  display:block;
  margin-left:auto;
}

<div >
  <button class='menuBtn'>click me</button>
<nav >
  <span >close</span>
  <ui>
    <li>
      <a href="#">home</a>
    </li>
    <li>
      <a href="#">about</a>
    </li>
  </ui>
</nav>
</div>

With this snippet code after the user clicked on the click me button, the .show class add to nav item class list.

CodePudding user response：

you can use this event check this tutorial

https://www.w3schools.com/jsref/event_animationend.asp

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera

x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax x.addEventListener("animationend", myEndFunction);