CODEWITHSUNDEEP
zurb-foundation
Rawiki
Rawiki

Reputation: 78

Foundation 6 Off-canvas fails to trigger from bower package

I've just started testing Foundation 6 from the Bower 'foundation-sites' package and while most of the Foundation modules I've tested seem to work I'm still unable to trigger the off-canvas menu.

I've tried swapping out jquery.js for jquery.min.js, tried replacing bower packages with cnd links to no effect and I've copy pasted numerous code examples on the net but I'm yet to have this work.

These are the scripts that are loaded 

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
<script src="bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script>

Here is the HTML copied from the foundation site.

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Page content -->
  </div>
</div>

Then include the toggle button

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

I then run $(document).foundation() in the console but the button remains unresponsive. If it's of any importance I'm running a custom MEAN stack with Angular routing and pm2 server on Ubuntu 16.04 although I've also tried in a plain html file and on codepen and cannot get either to work. I've tried removing foundation.offcanvas.js/foundation.core.js and the util scripts but still wont work. Here is the codepen with only jquery and foundation.min.js loaded - http://codepen.io/rawiki/pen/eZboXB.

What am I missing? Do I need to create a foundation.OffCanvas instance in JavaScript before this will work?

Upvotes: 0

Views: 96

Answers (1)

Shoaib Iqbal
Shoaib Iqbal

Reputation: 1178

It looks like there is nothing in the page content area thus it is setting offcanvas' height to 0, setting height of the page content area or adding some content to it will fix the issue.

here is the codepen, I just added the height

.off-canvas-content{
  height:300px;
}

Upvotes: 1

Related Questions