ScreamQueen ScreamQueen - 1 month ago 6
CSS Question

need button to show and hide overlay navigation

I am making a menu. I have a button that opens it, I would also like that button to close it. I have another button to close it but that is not what i'm after. Can anyone educate me on how this is done? Here is my JSBIN

here is how I'm opening it

<div class="burgerburger" onclick="openNav()">&#9776; open</div>


and this is the javascript I am using

function openNav() {
document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
document.getElementById("myNav").style.width = "0%";
}


Thanks for your help!

Answer

should be something simple like this, but Its up to you how to determine "navOpened"

<div class="burgerburger" onclick="toggleNav('myNav')">&#9776; open</div>

js

function toggleNav(selector) {
    if(navOpened(selector)) {
        closeNav(selector);
    } else {
        openNav(selector);
   }
}     

function navOpened(selector) {
    var elWidth = document.getElementById(selector).style.width;
    if(elWidth == "100%") { 
        return true; 
    } else { 
        return false; 
    }
}

function openNav(selector) {
    document.getElementById(selector).style.width = "100%";
}

function closeNav(selector) {
    document.getElementById(selector).style.width = "0%";
}