When I click to open "sidr side menu" I´m also clicking on my sidr menu item

Question

I followed the sidr documentation at: http://www.berriart.com/sidr/

And I already have my sidr side left menu working fine.

But on my mobile,only on android default browser, when I click in my link "Open Menu" I also click on my menu item "Menu 1", and so it opens my submenu items with my toggle effect. And I dont want this.

I just want to open my submenu items when I click in my Menu items, and not in my link to open the menu.

I found a solution, that is, if I put my sidr menu with some margin top, to not align with my link to open the menu, the problem is solved, like in my second image.

But I dont want to give that margin-top, so Im trying look for other solution.

Somebody there have exprience with this plugin and can give me a help??

(This only happens in mobile and on android browser that cames when you buy the smartphone, but I want to use this on mobile, and many users must use internet explorer which I think is the default browser for android.)

Like this image below, I have the problem, because the "Open Menu is aligned with "Menu 1" and so Im clicking on both!

Like this image below, I dont have the problem, because the "Open Menu is not aligned with "Menu 1" and so I only click on "Open Menu"!

This is my jQuery to start sidr plugin:

 $(document).ready(function() {
      $('#simple-menu').sidr({
           name: 'sidr', 
          speed: 200, 
          side: 'left',
          source: null, 
          renaming: true, 
          body: 'body'

         });
    });

$(document).ready(function() {
    $('.sub-menu-sidr').hide();

    $("#sidr li:has(ul)").click(function(){

    $("ul",this).toggle('fast');
    });
});

And here is my fiddle:

http://jsfiddle.net/y4CX4/1/

Answer 1

Easiest way to do that, IMHO is to prevent the first click on that link from happening, that is:

Define a variable to check if link was clicked, at click event check the value and prevent the event from propagating and then set the variable to something else, in order to allow all future clicks to happen naturally, for example:

var click = false;
$('#sidr > ul > li').first().find('a').first().click( function(e) { if ( click == false ) {
    e.stopPropagation();
    click = true;
} });

The next step would be to add a function that resets this variable when the menu gets closed by adding:

      onClose : function() {
          click = false;
      }

An working example can be found here: http://jsfiddle.net/y4CX4/3/

Also make sure you use the same function in order to use the variable click properly ( in the fiddle you posted you used $(document).ready() two times for some reason ).

Answer 2

My solution to that problem is based on the top answer which helped me find the right way.

So I find all the links and prevent their default behavior until the menu is opened and then disable them again when the menu is closed.

var menuButton = $('.js-side-menu-toggle');
var sideMenuLinks = $('#sidr').find('a');
var canClick = false;

sideMenuLinks.on('click', function(e) {
    if (!canClick) {
        e.preventDefault();
    }
});

menuButton.sidr({
    onOpen: function() {
        canClick = true;
    },
    onClose: function() {
        canClick = false;
    }
});

The tricky part here is that we need to change the plugin itself so that this code can work.

The problem is that the functions onOpen() and onClose() are called after the animation is done but not in it's callback function. That makes the functions to be called with the animation which is async and here is our issue.

Wrong:

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');          
});

// onClose callback
onClose();

We just need to insert the onClose function inside the animation callback function in order to lock the links when the menu is closed and we should do the same with the on open code fragment.

Right:

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');  

    // onClose callback
    onClose();        
});