幻灯片菜单不会滑动

Question

I created a side menu in css and want to use the the tranform: translateX() property to slide it on and off on the page. I'm using a checkbox to toggle the menu on and off. So I thought I can use javascript to make it function, but it's not working. Can you edit the transform property through javascript?

here's the code...

window.onload = function () {
        var toggle_btn = document.getElementById('toggle_btn');
        var slide_menu = document.getElementById('slide_menu');

        var checked = function() {
            toggle_btn.checked = true;
        };

        if (checked === true) {
            slide_menu.style.transform = "translateX(0px)";
        } else {
            slide_menu.style.transform = "translateX(-200px)";
        }
    };

Answer 1

Try:

window.onload = function () {
    var toggle_btn = document.getElementById('toggle_btn'),
        slide_menu = document.getElementById('slide_menu');

    slide_menu.style.transform = toggle_btn.checked=== true ? "none" : "translateX(-200px)";

};

BTW - you don't need javascript for this: http://jsfiddle.net/w5te8qqx/1/