Add a toggle button to the Snap.js

Question

I have used this https://github.com/jakiestfu/Snap.js/ to create a menu that appears behind the page and when you swipe the page to the right it shows the menu underneath it, everything seems to be working but when I try to add a toggle button to the page so when click on it it actually opens the menu? as in swipe the page without touching it. I tried to follow what is told here: https://github.com/jakiestfu/Snap.js/#--how-do-i-make-a-toggle-button but I just can't get it to work!

Here's What I have so far:

        $(function() {
            var Button  = $('.buttons');

                function applySnap(){
                    var width = window.innerWidth;
                    if(width<800){
                        if(window.snap){
                            window.snap.enable();
                        } else {
                            window.snap = new Snap({
                                element: document.getElementById('Page')
                            });
                        }    
                    } else {
                        if(window.snap){
                            window.snap.disable();
                        }
                    }
                }
                window.onresize = applySnap;
                applySnap();
        });  

    $(Button).on('click', function(a) {
                if( snapper.state().state=="right" ){
                snapper.close();
            } else {
                snapper.close('left');
            }
            });

and this is in the HTML section:

<div id="SecondHeader">
<a class="SecondHeader-button" href="#" >Menu</a>
</div>

Thanks lot for any help!

Answer 1

You need call the event manager.

addEvent(document.getElementById('open-left'), 'click', function(){
    if( snapper.state().state=="left" ){
       snapper.close('left');
    }else {
        snapper.open('left');
    }
});

I use like this!

Good Look!