Menu icon Foundation
Close Expanded Top-Bar in Foundation 6?

With Foundation 6 what is the recommended way of closing the expanded Top-Bar for responsive mobile mode once a user clicks on a link? Currently by default you have to close it manually by clicking on the hamburger menu button.

In my use case I click on a menu item (this is an anchor location in a long scrolling page) but you don't know if you have been taken to the location due to the menu still being open.

foundation 6top-barnavigationexpanded

With Foundation 6 what is the recommended way of closing the expanded Top-Bar for responsive mobile mode once a user clicks on a link? Currently by default you have to close it manually by clicking on the hamburger menu button.

In my use case I click on a menu item (this is an anchor location in a long scrolling page) but you don't know if you have been taken to the location due to the menu still being open.

Rafi Benkual almost 4 years ago

We are seeing this use case more and more. Are you developing a SPA or Single page static site?

There is an existing option in the dropdown menu component to do this
closeOnClick Allow clicks on the body to close any open submenus. true

Rafi Benkual almost 4 years ago

The reason I ask is that you'll see more component sharing between Foundation for Apps and Sites, which will mean that plugins are accounting for these use cases.

More detailed discussion on that http://foundation.zurb.com/forum/posts/37949-mixing-the-grids-f6-and-apps

Jacob Brooks almost 4 years ago

@Rafi Benkual I am having a similar issue. I have a Single Page Static site that scrolls to anchor tags down the page. I tried turning on the closeOnClick: true, and had no luck.

Just thought id add in my 2cents on the issue as well.

Rafi Benkual almost 4 years ago

How did you use it?

Jacob Brooks almost 4 years ago

through the bower_components > foundation-sites > js > dropdownMenu.js

Rafi Benkual almost 4 years ago

Hmm, that doesn't sound like the right place. You can add a data-option in the HTML or call options in the JS on you page or layout.

Something like

<ul class="dropdown menu" data-dropdown-menu data-click-open="false">

Aaron Hockemeyer about 3 years ago

None of this works for me. 

BenjamineDupont about 3 years ago

through the bower_components > foundation-sites > js > dropdownMenu.js