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"
}
You can use the transitionend event and hide the Button in an eventlistener
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 class="container">
<button class='menuBtn'>click me</button>
<nav class="navigation">
<span class="closeBtn">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.
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);