2

I have this plugin that I downloaded from http://www.berriart.com/sidr/ once I click on a button it shows slides the menu and when I want to close it I can only close it by clicking back on the same button. Now I want to add a click anywhere in the body to move back the menu. could anyone please help me fix this?

Here is my html:

<div id="sidr">
<!-- <button class="close-side-menu"><i class="icon-close"></i></button> -->
<ul>
<li>
</li>
</ul>
</div>
<button type="button" class="menu-icon open-side-menu">
<a id="simple-menu" href="#sidr">
</a>
</button>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
billel spinoo
  • 47
  • 2
  • 8

2 Answers2

5

Try this script:

    $(document).mouseup(function (e){
    var container = $("#sidr");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {


        $.sidr('close', 'sidr');

    }
});

Managed to get a script from this here then was able to add $.sidr('close', 'sidr');just make sure to change the 'sidr' to the class name of the menu you'd like to try.

Hope this helps.

Community
  • 1
  • 1
JDavies
  • 2,730
  • 7
  • 34
  • 54
1

Untested, but should work for your purposes:

$(document).ready(function() {
    $("body").click(function() {
        if ($(this).attr('id') != 'simple-menu') && !$(this).parents('#simple-menu').length) {
              $.sidr('close', 'simple-menu');
        }
    });
});

This checks the onclick event fired from clicking the body and verifies that you did not click on the menu or an ancestor of the menu

Jonathan Crowe
  • 5,793
  • 1
  • 18
  • 28
  • Thanks for helping out. still not working, it says: Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover any thoughts ? – billel spinoo Oct 29 '14 at 18:46
  • Neither the code you posted nor the code I posted makes use of :hover so either the problem is somewhere else in your code or in the library itself. Can you reproduce this issue in jsfidde or do you have a live site you can direct me to? – Jonathan Crowe Oct 29 '14 at 18:48
  • I tried to reproduce the issue in jsfidde but I couldnt since I have many files and im still working locally so I have no link to the site I'm working on. Would it be helpful if you take a look a the actual plugin from http://www.berriart.com/sidr/ ? the one I am using called "simple menue" – billel spinoo Oct 29 '14 at 19:06
  • There is nothing in the plugin using the :hover psuedoclass. Check your code and see if you are using anywhere. Are you using any other javascript libraries? – Jonathan Crowe Oct 29 '14 at 19:26
  • This works for me except for the extra close parens after 'simple-menu'. The if statement should be: `if ($(this).attr('id') != 'simple-menu' && !$(this).parents('#simple-menu').length)` – MatthewLee Sep 01 '15 at 18:01