Menu icon Foundation
Off-canvas menu reveal in large viewport

I make an off-canvas menu and I want it show/hide based on the size of the viewport (I figured this out!). Now I want to add a function that allowing users to open the off-canvas menu in the small viewport when it is hidden. How should I do this?

My code sample:

<!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>Kahuna</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    <div data-sticky-container>
      <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
        <div class="title-bar-left">
          <button type="button" class="menu-icon" data-open="offCanvas"></button>
          Brand
        </div>
        <div class="title-bar-right">User</div>
      </div>
    </div>

    <div class="off-canvas position-left reveal-for-large" id="offCanvas" data-off-canvas>
      <!-- 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>
      {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
      {{> body}}
    </div>
    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>

off-canvastoggle

I make an off-canvas menu and I want it show/hide based on the size of the viewport (I figured this out!). Now I want to add a function that allowing users to open the off-canvas menu in the small viewport when it is hidden. How should I do this?

My code sample:

<!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>Kahuna</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    <div data-sticky-container>
      <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
        <div class="title-bar-left">
          <button type="button" class="menu-icon" data-open="offCanvas"></button>
          Brand
        </div>
        <div class="title-bar-right">User</div>
      </div>
    </div>

    <div class="off-canvas position-left reveal-for-large" id="offCanvas" data-off-canvas>
      <!-- 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>
      {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
      {{> body}}
    </div>
    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>

This post has been closed. No new replies can be added.

David Shen over 2 years ago

By the way, this is the error show in the console 

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at OffCanvas._init (app.js:14884)
    at new OffCanvas (app.js:14838)
    at HTMLDivElement.<anonymous> (app.js:9880)
    at Function.each (app.js:368)
    at jQuery.fn.init.each (app.js:140)
    at String.<anonymous> (app.js:9862)
    at Function.each (app.js:368)
    at Object.reflow (app.js:9854)
    at jQuery.fn.init.foundation (app.js:9962)
    at app.js:18822
(anonymous) @ app.js:9882

Brett Mason over 2 years ago

Hi David

Would it be possible to post a CodePen example? This might help work out what exactly you are doing and whats going wrong.