Menu icon Foundation
Close Mobile TopBar menu on body click

Hello out there, I was wondering someone can help figure a way to automatically close my top-bar mobile menu when the user clicks out side the menu in the body? Trying to avoid them having to click the menu open/close button every time. I'm not very experienced is JS so help would be great. Thanks a ton in advance.

Here is my menu code:

<!-- <div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: small">
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>MENU</span></a>
</li>
</ul>

<section class="top-bar-section">
<ul class="right">
<li></li>
</ul>
</section>
</nav>
</div> -->

top-barclosemobilecustom top-bar

Hello out there, I was wondering someone can help figure a way to automatically close my top-bar mobile menu when the user clicks out side the menu in the body? Trying to avoid them having to click the menu open/close button every time. I'm not very experienced is JS so help would be great. Thanks a ton in advance.

Here is my menu code:

<!-- <div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: small">
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>MENU</span></a>
</li>
</ul>

<section class="top-bar-section">
<ul class="right">
<li></li>
</ul>
</section>
</nav>
</div> -->

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

When the mobile menu is opened, a class called "expanded" to the nav bar when you toggle the menu icon on and off. So you can just remove the "expanded" class when someone clicks on your buttons.

This is what it should look like:

$(document).ready(function($) {
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
       $('.top-bar').removeClass('expanded');
    });
));

Trevor Lavigne over 4 years ago

Thanks for the help... I made it work with the following code:

$("body").click(function(){

$(".top-bar").removeClass("expanded");
});