Mega-menu
Mega-menu is built using Foundation's native top-bar navigation for small and medium screens and an alternative HTML structure for large screens which is implemented using Foundation's interchange feature.
The small screen mobile version is loaded into the source by default and will serve as the navigation if javascript is disabled. The explicit small and large mega-menu static HTML blocks are then called in though their configuration in the containing element.
<div id="mega-menu" data-interchange="[partials/mega-menu-medium.html, (default)], [partials/mega-menu-medium.html, (medium)], [partials/mega-menu-large.html, (large)]”>The data-interchange attribute defines the content blocks to be called in and the breakpoints at which they're to be used.
If the standard Foundation breakpoints have been customised, as they have been in ICAEW to reduce the medium to large breakpoint to 960px, it will also be necessary to specify a matching breakpoint in the application's javascript file.
$(document).foundation('interchange', {
named_queries : {
medium : 'only screen and (max-width: 960px)',
large : 'only screen and (min-width: 960px)'
}
});Using data-interchange with top-bar
To get data-interchange working with top-bar to swap out the mobile or desktop version of the menu, it's necessary to add another javascript listener to get the top-bar off-screen sub menus to work.
$("#mega-menu").on("replace", function() {
$(document).foundation();
});http://foundation.zurb.com/forum/posts/1030-interchange-to-load-foundation-js-content