How to close the foundation top pane window when clicking a link?

Question

I use the Zurb Foundation’s fixed top bar on my single page site and contains links to locations on the page. I would like that whenever a link is clicked in the advanced mobile menu, the menu closes.

Currently, when a link is clicked, the page scrolls, but the menu remains open at the top of the page out of sight.

In a previous version of Foundation, I was able to redo the code and find a simple solution. Since upgrading to 4.3.1, in order to fix another problem with the top bar, I cannot find a solution due to my limited knowledge of javascript.

topbar

It seems to me that if I can start an event or function to close the menu when I click a link in the menu, this will be fixed. I used to put my code, which happened on the link, click on line 261.

When the mobile menu closes, the added feed is added to the div surrounding the top panel, and .expanded and .fixed are removed from the div.topbar.

Answer 1

You can try adding some jQuery to collapse the menu when you click on the link.

You can add code enclosed inside a script element. Put it after all your html elements (inside the body element). You can also put it in a separate javascript file, which you can use like any other javascript file. Make sure you set this link after the jquery link.

The code itself can be quite simple, as it looks so that when you add and turn off the menu icon, the "extended" class is added to the navigation bar. That way, you can simply remove the “extended” class when someone clicks on your buttons.

Here's how it should look:

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

The selector ".top-bar ul.right (or .left depending on how you arrange your buttons) li" can be called with an identifier, also if you specify your menu (ul element) a unique identifier. In this case, it will be:

 jQuery(document).ready(function($) { $('#myMenuId li').click(function() { $('.top-bar').removeClass('expanded'); }); }(jQuery)); 

Hope this helps.

Answer 2

Try:

 $('#main-menu li').click(function() { $('.toggle-topbar').trigger('click'); }); 

Answer 3

This is my first time working with Foundation 6, and I came across this message trying to figure out how to close the new top bar menu on a mobile phone when the link was clicked. I wanted to comment on my decision if someone else working on Foundation 6 runs through this post as it has become a good starting point for me.

Here is what I did:

Navigation installation - horizontal navigation at medium and large control points, responsive to the inclusion of vertical navigation at a small breakpoint

  <!-- Mobile responsive toggle (hamburger menu) --> <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">Menu</div> </div> <!-- Nav items --> <div id="siteNav" class="top-bar"> <p><ul class="vertical medium-horizontal menu text-center"> <li ><a href="#home" onClick="">HOME</a></li> <li ><a href="#services">SERVICES</a></li> <li ><a href="#contact">CONTACT</a></li> </ul></p> </div> 

Then I added a modified version of jquery based on previous solutions in this article (thanks to amazingBastard and Cerbrus):

 $(document).ready(function($) { $('#siteNav li').click(function() { if(Foundation.MediaQuery.current == 'small'){ $('#siteNav').css('display', 'none'); } }); }); 

In Foundation 6, the "css" "css" selector is added to the advanced menu, which is either "display: none" for the "hidden" or "display: block" for the advanced menu. This jquery snippet checks the current breakpoint on a small (mobile device) when you click the nav element in the default menu class that I use, and if true changes the css selector to "display: none", effectively closing the menu switch.

Answer 4

A cleaner way (instead of triggering a click or deleting a class):

  $(document).on("click", ".top-bar li", function () { Foundation.libs.topbar.toggle($('.top-bar')); }); 

Answer 5

This is what works for me:

 setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); 

Let me know if this works for you too. (Maybe reduce "500" to a time not exceeding half a second).

Here is the extended version:

 <script type="text/javascript"> function hideDropDown() { setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); } </script> <nav class="top-bar" data-topbar role="navigation"> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="has-dropdown"> <a href="#">My menu</a> <ul class="dropdown"> <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li> </ul> </li> </ul> </section> </nav> 

Answer 6

I copied some of the code in the code of the close function of the Foundation 6 dropdown menu.

To do this, I also had to set the option data-disable-hover = "true in the menu item, otherwise the menu will not close when the user first clicks on the item in it.

I wrote my code in AngularJS and made it work. I guess it will look like this for jQuery. In other words, the code is not verified.

 $('#main-menu li').click(function closeDropdown() { var $toClose = $('#main-menu'); if(!$toClose){ return; } var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0; if (somethingToClose) { $toClose.find('li.is-active').add($toClose).attr({ 'aria-expanded': false, 'data-is-click': false }).removeClass('is-active'); $toClose.find('ul.js-dropdown-active').attr({ 'aria-hidden': true }).removeClass('js-dropdown-active'); } });