How can I close the Foundation topbar menu when a link is clicked?

Question

I am using Zurb Foundation's fixed topbar on my single page site, and it contains anchor links to places within the page. I would like it so that whenever a link inside the expanded mobile menu is clicked, the menu closes.

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

In a previous version of Foundation, I was able to reverse engineer the code and find a simple solution. Since updating to 4.3.1 to fix another issue with the topbar, I am unable to find a solution due to my limited knowledge of javascript.

topbar

It seems to me that if I could fire the event or function for menu closing when a link in the menu is clicked, it would be fixed. Previously, I put my code that happened on a link click on line 261.

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

Answer 1

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

You can add the code wrapped inside a script element. Place it after all your html elements (inside body element). You can also put it in a separate javascript file that you can source like you would any other javascript file. Make sure you put that link after jquery link.

The code itself can be pretty simple since it looks like foundation adds 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:

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 how you arranged your buttons) li' can be called with an id also if you give your menu (the ul element) a unique id. In this case it would be:

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

Hope that helps.

Answer 2

Try:

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

Answer 3

I'm working with Foundation 6 for the first time, and I ran across this post while trying to figure out a way to close the new top-bar menu on mobile when a link had been clicked. I wanted to comment with my solution in case anyone else working on Foundation 6 runs across this post, since it was a good starting place for me.

Here's what I did:

Navigation setup - horizontal nav on medium and large breakpoints, responsive toggle vertical nav on 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 the jquery based on the previous solutions in this post (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 selector "display" is added to an expanded menu and set to either "display:none" for hidden or "display:block" for expanded. This jquery snippet checks the current breakpoint against small(mobile device) on click of a nav item in the default menu class I am using, and if true changes the css selector to "display:none", effectively closing the menu toggle.

Answer 4

A cleaner way (instead of trigger click or remove 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 shorter than half a second too).

Here's an expanded 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 Foundation 6 dropdown's close function.

To make it work I also had to set the option data-disable-hover="true on the menu element otherwise the menu wouldn't close the first time the user clicked an element in it.

I wrote my code in AngularJS and made it work. I'm guessing it would look like this for jQuery. In other word, the code is not tested.

$('#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');
     }
  });