Foundation-sites: [data-responsive-toggle] - click outside menu to close it.

Created on 26 Jan 2017  ·  10Comments  ·  Source: foundation/foundation-sites

How to be able to close mobile menu by clicking outside menu now we can close only by clicking “X"

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
.......
</div>


codepen

All 10 comments

I don not know why it doesn't work in codepen, by the this code help me.

$(window).click(function () {
        var isActive =  $('#mobile-nav-menu').hasClass('active');
       if(isActive){
           $('#mobile-nav-menu').removeClass("active").css('display', 'none');
           $('.menu-toggle').toggleClass('open');

       }
    });
    $('.navigation-mobile-wrapper').click(function(event){
    event.stopPropagation();
    });

You are using old foundation in your codepen
Please use latest foundation

For your help,
Here is the latest codepen => https://codepen.io/IamManchanda/pen/vgemXR
& here is Flexbox codpen => https://codepen.io/IamManchanda/pen/xgXdRq

and moreover ....firstly forget the codes .... first tell me in brief what issue you are facing ? @palaniichukdmytro .... we might be able to help you out!

@IamManchanda I need to be able close menu by clicking outside menu, now we can only close by clicking
toggle button.

It's already there .... Just tested out with the foundation docs

Tested OS - Android, iPhone

Am I correct in assuming that after testing this stuff will be added to Zurb 6 docs?

No .... I Mean that it works on the current live website .....
=> Click outside to close menu,...

Yes, thanks, it came with 6.3 v. and off-canvas.

YAII @palaniichukdmytro Seems like your issue is resolved now... Please close this.

Closing based on the above conversation

Was this page helpful?
0 / 5 - 0 ratings