Menu icon Foundation
Interchange to Load Foundation JS Content

I would very much like to achieve the following:

On my mobile (small) layout, I would like to use the off-canvas navigation. I have this coded into my index.html file and gave it a class of 'show-for-small-only' to hide it on larger views.

I then use Interchange to load the top-bar navigation when we reach widths above 'small.' Everything looks dandy until you attempt to use the drop down navigation.

After having read the documentation on Interchange, I feel the answer lies somewhere in the sections about "Events" and "Adding New Interchange Content After Page Load." I am not able to successfully use the instructions given to me there.

Does anyone know how to correctly "reflow" the top-bar after loading it via Interchange? I suppose this would apply to loading any Foundation JS content?

<div class="large-menu" data-interchange="[interchange/topbar.html, (medium)], [interchange/topbar.html, (large)]">
</div>

<!-- topbar.html-->
<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

<!-- topbar.html-->
<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

$(document).on('replace', 'div.large-menu', function (e) {
  $(document).foundation('interchange', 'reflow');
});
//This code modified from the interchange documentation as best as I understand it
//Does not work

interchangetop barReflowjs

I would very much like to achieve the following:

On my mobile (small) layout, I would like to use the off-canvas navigation. I have this coded into my index.html file and gave it a class of 'show-for-small-only' to hide it on larger views.

I then use Interchange to load the top-bar navigation when we reach widths above 'small.' Everything looks dandy until you attempt to use the drop down navigation.

After having read the documentation on Interchange, I feel the answer lies somewhere in the sections about "Events" and "Adding New Interchange Content After Page Load." I am not able to successfully use the instructions given to me there.

Does anyone know how to correctly "reflow" the top-bar after loading it via Interchange? I suppose this would apply to loading any Foundation JS content?

<div class="large-menu" data-interchange="[interchange/topbar.html, (medium)], [interchange/topbar.html, (large)]">
</div>

<!-- topbar.html-->
<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

<!-- topbar.html-->
<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

$(document).on('replace', 'div.large-menu', function (e) {
  $(document).foundation('interchange', 'reflow');
});
//This code modified from the interchange documentation as best as I understand it
//Does not work
Peter Gibb over 5 years ago

I was having a similar issue trying to use data-interchange to swap between a top-bar based small/medium mobile menu and a large-up desktop mega menu.

The sub-menus on the mobile version didn't work (height was limited to initial size and no back link). In console it was reporting:

Uncaught TypeError: Cannot read property 'scrolltop' of undefined foundation.topbar.js:93
Foundation.libs.topbar.toggle foundation.topbar.js:93
(anonymous function) foundation.topbar.js:137
x.event.dispatch jquery.js:4676
y.handle jquery.js:4360

Using Alan Smithee's link however solved my problem by adding

$("#mega-menu").on("replace", function() {
$(document).foundation();
});
 

where id="mega-menu" is the element with the data-interchange.

Thanks.