Closing a menu when you click on it or outside of it [duplicate]

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 stackoverflow.com/q/1403615/2126792

pschueller
– pschueller

2014-02-28 08:34:59 +00:00
Commented Feb 28, 2014 at 8:34 — pschueller
– pschueller, Commented Feb 28, 2014 at 8:34

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 28, 2014 at 8:39

SirDeveloper

2761 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ysteriotis Over a year ago

I try this but doesn't work..

SirDeveloper Over a year ago

what do you mean for "doesn't work"? have you included jquery? console give you any error?

SirDeveloper Over a year ago

take a look at edit.. is this what you need?

ysteriotis Over a year ago

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 the nav button is on the up left corner

SirDeveloper Over a year ago

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');

|

Vikas Gautam · Accepted Answer · 2014-02-28 08:49:39Z

0

$(document).ready(function(){ $('#menuToggle, .menu-close').click(function() { $('toggle dive id').slideToggle('slow'); }); });

answered Feb 28, 2014 at 8:49

Vikas Gautam

9788 silver badges25 bronze badges

2 Comments

ysteriotis Over a year ago

I try this but doesn't work..

Vikas Gautam Over a year ago

have you included the jquery file

Collectives™ on Stack Overflow

Closing a menu when you click on it or outside of it [duplicate]

2 Answers 2

edit

7 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

edit

7 Comments

2 Comments

Linked

Related