When the menu button div is clicked, I want it to transitionm which it does, and make the menu div appear, the code for which is in a different function. For some reason, the second function does not run. If I remove the else{} section it seems to work, however. How do I fix this?
#menubtn {
margin-top:4px;
margin-left:-300px;
position:absolute;
display:inline-block;
}
#menubtn div {
width:35px;
height:5px;
background-color:black;
margin:6px 0;
transition: 0.4s;
}
.change #bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
.change #bar2 {
opacity:0;
}
.change #bar3 {
transform:rotate(45deg) translate(-8px, -8px);
}
#menu {
background-color:white;
width:300px;
height:400px;
position:absolute;
top:80px;
border-right:solid 5px rgba(35, 203, 167, 1);
border-bottom:solid 5px rgba(35, 203, 167, 1);
z-index:10;
transition: width 1s;
overflow:hidden;
display:none;
}
<div id="menubtn" onclick="menu(this); menushow()">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
</div>
<div id="menu">
<h1>Menu</h1>
<a href="">Home</a><br>
<a href="">About me!</a><br>
<a href="">Bread</a><br>
<a href="">Sweet treats</a><br>
<a href="">How to start baking</a>
</div>
function menu(x) {
x.classList.toggle("change")
}
var menushow = "false"
function menushow() {
if (menushow == "false") {
document.getElementById("menu").style.display="block";
menushow = "true";
} else {
document.getElementById("menu").style.display="none";
menushow = "false";
}
}
Aucun commentaire:
Enregistrer un commentaire