0

I followed the documentation for off-canvas use and it didn't work at all. F6 Forum returned 403 when I tried to create a post at theri forum :(.

Here is the HTML code I tried:

<!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>Foundation Starter Template</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="app.css"/>

  </head>
  <body>

    <div class="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>
        <!-- Your page content lives here -->
        Welcome !
      </div>
    </div>

    <!-- Compressed JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

There is only "Welcome' displayed, no off-canvas. What am I doing wrong here ? Thank you.

belgoros
  • 3,590
  • 7
  • 38
  • 76

1 Answers1

1

Are you sure there is nothing there?

It looks like you are just missing a click handler to open your off canvas content - as per the docs.

Try and adding:

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

within your 

<div class="off-canvas-content" data-off-canvas-content>
CDK
  • 669
  • 1
  • 5
  • 17
  • Yep, after adding the button it worked. But 1 -> what is the close button for (it does not work either, is just displayed), 2 -> I believed that the canvas would be always displayed and could be collapsed or opened via a menu button. – belgoros Jan 09 '18 at 12:19
  • No, by default, the off canvas will not be displayed (it will be hidden *off* your main canvas). You can change the button you have just added to have a menu icon so that users click it to open the menu. If you want it to be open by default, you will want to use the script $('#element').foundation('open', event, trigger); to do so. As for the close button not working, I am not entirely sure, the docs suggest this should work to close it, but clicking / tapping anywhere *on* your canvas should automatically close the off canvas content. – CDK Jan 09 '18 at 13:15