Foundation 6's Off-canvas not working

I'm trying to get Foundation 6's Off-canvas feature to work. At this point, I am now trying to get Zurb's own example out of their documentation (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example) to work.

When my button to open the canvas is clicked, nothing happens. No sliding, no fading, nothing.

I have checked that foundation.js is being included in the page. I can see that the event handler is bound to the button.

Ideas? Thanks in advance!

HTML source:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | LearnLojban</title>
    <link href="https://fonts.googleapis.com/css?family=Merriweather:700,700i|Pangolin|Signika&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="static/styles/styles.css" />
  </head>
  <body>

    <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>
      <button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
    </div>

    <script src="static/js/vendor/jquery.js"></script>
    <script src="static/js/vendor/what-input.js"></script>
    <script src="static/js/vendor/foundation.js"></script>

  </body>
</html>

Solution

The reason why the off-canvas isn't working is because you are not initializing the Foundation JS.

In either a jQuery .ready() or after <script> elements of your index.html you need to call $(document).foundation(); per the installation documentation example

$(document).ready(function(){
    $(document).foundation();
});

OR:

<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

Here is a jsfiddle with the basic off-canvas example with $(document).foundation() being called and the functionality working using ready().

Here is a jsfiddle without $(document).foundation() being called and you'll immediately see that the functionality is failing.

Call $(document).foundation() after all the scripts have loaded and you should be able to get off-canvas and any other functionality up and running.

You can also target specific elements by calling foundation() on that element.

$('#foo').foundation(); // initialize all plugins within the element `#foo`

jsfiddle demonstrating targeting a specific element.

Hopefully that helps!