Closing a menu when you click on it or outside of it

Question

I have a nav in a box with this html:

<nav class="menu" id="theMenu">
    <div class="menu-wrap">
        <h1 class="logo"><a href="index.html#home">LOGO</a></h1>

        <i class="icon-remove menu-close"></i>

        <a href="#headerwrap">HOME</a>
        <a href="#information">INFO</a>
        <a href="#portfolio">Portfolio</a>
    </div>

    <!-- Menu button -->
    <div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>

And this jQuery:

;(function(){

        // Menu settings
        $('#menuToggle, .menu-close').on('click', function(){
            $('#menuToggle').toggleClass('active');
            $('body').toggleClass('body-push-toleft');
            $('#theMenu').toggleClass('menu-open');
        });

     })(jQuery)

Can you please help me and write me what I have to add in the js to close my menu when I click in the menu button but ALSO when I clicked outside ?

Duplicate of http://stackoverflow.com/q/1403615/2126792 – pschueller Feb 28 '14 at 08:34 — pschueller, Feb 28 '14 at 08:34

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You can bind click on the whole body, for instance:

$(window).on('click', function() {
   $('#theMenu').removeClass('menu-open');
})

that's it. If 'themenu' has class 'menu-open', on window-click this class will be removed.

edit

Otherwise you can consider the example in this DEMO.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 28 '14 at 08:39

SirDeveloper

276
1
10

I try this but doesn't work.. – ysteriotis Feb 28 '14 at 11:08
what do you mean for "doesn't work"? have you included jquery? console give you any error? – SirDeveloper Feb 28 '14 at 11:17
take a look at edit.. is this what you need? – SirDeveloper Feb 28 '14 at 11:29
First of all thank you very very much for your help! Second yes this is the action which I need but if I will implement this code I still cannot work the menu. You add an extra div and I add it also but still nothing...can you check my demo please here to see : [link](http://fowe.eu) the nav button is on the up left corner – ysteriotis Feb 28 '14 at 12:49
Check again demo, I've updated the link. Add a class to a-item, say calling it "menu-item", and add a check in document.on('click'); – SirDeveloper Feb 28 '14 at 13:20
I add the first code that you write me but with a small difference. If I put $(window) the menu doesn't open at all because menu is on the window....so I wrap every div with an extra section element and I make the code like this : $('section').on('click', function() { $('#theMenu').removeClass('menu-open'); }) now is working perfect! What do you think?? – ysteriotis Feb 28 '14 at 14:03
I've seen your website, nice! I would say that now works, isn't it! good! – SirDeveloper Feb 28 '14 at 14:11

score 0 · Answer 2 · answered Feb 28 '14 at 08:49

0

$(document).ready(function(){

 $('#menuToggle, .menu-close').click(function() {

 $('toggle dive id').slideToggle('slow');

});

});

answered Feb 28 '14 at 08:49

Vikas Gautam

997
7
23

I try this but doesn't work.. – ysteriotis Feb 28 '14 at 11:06
have you included the jquery file – Vikas Gautam Feb 28 '14 at 11:10

Closing a menu when you click on it or outside of it

2 Answers2

edit