mardi 27 octobre 2020

If-else Function Does Not Run

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