Using Javascript to change CSS property

Question

I’m not getting it to work, I have a retractable side menu and a button in a bar in the header. I’ve set my menu to margin-left: -250px; and wanted that when I pressed the button it set to margin-left: 0;, thus making the menu appear again.

CSS from the menu:

#menu-lateral {
    width: 250px;
    height: 100%;
    margin-left: -250px;
}

HTML button:

<div class="btn-header">
      <a href="" id="btn-menu">
      <img src="img/menu.png">
      <img src="img/icone.png">
      <p>Home</p></a>
</div> 

Javascript I made:

    var clique = document.getElementById("btn-menu"); 
    var menuLateral = document.getElementById("menu-lateral");

    clique.onclick = function(){
        document.menuLateral.style.marginLeft = "0";
    };

My goal is:

When you click the button change to #menu-lateral the margin-left: -250px; for margin-left: 0; and that when the menu is open, if you click again it closes (setting the margin-left: -250px; again).

Answer 1

You have to change two things:

First you must use e.preventDefault(); to prevent the link from reloading the page, or joining # in the href.

According to you, a variable pointing to the menu, var menuLateral = document.getElementById("menu-lateral");. Later in the code instead of using the variable you use document.menuLateral.style... when you should only use menuLateral.style...

Fix it like this:

clique.onclick = function (e) {
    e.preventDefault();
    menuLateral.style.marginLeft = "0";
};

Example (with CSS Transition also): http://jsfiddle.net/zjevj1vv/

You can also do this via CSS class, in this case you apply the new style via CSS which is best. An example of how to do toggle would be:

CSS

.toggleMenu {
    margin-left: 0px !important;
}

Javascript

clique.onclick = function (e) {
    e.preventDefault();
    menuLateral.classList.toggle('toggleMenu');
};

The toggle add a class and/or remove it if it already exists. It’s like the button on the TV remote control, press to turn on/off.
The !important is to say that when this class is added then this rule overrides the other of margin-left: -250px;.
The transition, says the change must be by animation and duration of 0.7 seconds

jsFiddle: http://jsfiddle.net/zjev1v/1/