How do I create a slide out menu?

Question

I've just started and I'm very very new to programming, but i wanna create a slide-out menu bar for a html that I'm testing out my knowledge on,

can anyone help me with this? I've been trying to figure out why my code doesnt work when i click the button:

var isOpened;

function openMenu() {
    $('#sidebar').animate({
        'marginLeft' : "+=248px"
    }, 200);
    $('.mainBody').animate({
        'marginLeft' : "+=248px"
    },200);
    isOpened = true;
};

function closeMenu() {
    $('#sidebar').animate({
        'marginLeft' : "-=248px"
    }, 200);
    $('.mainBody').animate({
        'marginLeft' : "-=248px"
    },200);
    isOpened = false;
};

function animate() {
    if (isOpened === false) {
        $('button').click(function() {
            openMenu();
        });
    } else {
        $('button').click(closeMenu(function(){
            closeMenu();
        }));
    }
};

$(document).ready(animate);

Answer 1

A suggestion not an answer exactly. But can help you.

Instead of the code below from your code snippet,

function animate() {
    if (isOpened === false) {
        $('button').click(function() {
            openMenu();
        });
    } else {
        $('button').click(closeMenu(function(){
            closeMenu();
        }));
    }
};

Do this instead and compare line by line about what did your code do and what this below code will do...

function animate() {
    $('button').click(function() {
        if(isOpened === false) {
            openMenu();
        } else {
            closeMenu();
        }
    });
}

And $(document).ready will execute once and as per your code only one click event is registered. That is handle both close and open in one click event listener.