Q:

Issue with slideIn/Out menu

I have been working on this menu plugin, and its working fine, however there is one problem I've noticed, please see this JSFiddle Demo
When menu is opened, I have added a close button (x) on the top right corner of the menu, when I click on close its sliding to left and hiding but when I click on menu again its not opening but if you click once again it works perfectly.
Can somebody please guide how to make my custom close icon working perfectly, as its doing with outside menu click?
I found that on close click, its removing a class and adding inline css of translate3D which I have done same in my jquery, but no luck
Here is my close jQuery function
$(document).ready(function(){
  $('.nav-close').click(function(){
    $("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
    $(".mp-level").removeClass('mp-level-open');
  });
});

A:

What you want to do is keep a reference to the menu so you can close it in your event.
https://jsfiddle.net/ps855n8r/14/
var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

That way in your event you can close like so :
menuItem._resetMenu();

Don't try to close it manually using the DOM, which means your even function becomes like this : 
$(document).ready(function(){
    $('.nav-close').click(function(el){
        menuItem._resetMenu();
    });
  });

Also helpful for calling other methods on the mlPushMenu object elsewhere. In the above example; menuItem is your reference. 

