Menu icon Foundation
Foundation 6.4.3 Sass off-canvas menu not working

I installed foundation 6.4.3 sass version on my mac with foundation-cli. I run following commands

foundation new

name: test

foundation  zurb templates with sass

foundation watch;

browser opened (localhost:8000)

Default page is shown.

 

I am trying to add off-canvas to default.html  with following code. But it is not working. Nothing happens

What am i missing?

 

{{!-- This is the base layout for your project, and will be used on every page. --}}

 

<!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 for Sites</title>

    <link rel="stylesheet" href="{{root}}assets/css/app.css">

</head>

 

<body>

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

        <!-- Your menu or Off-canvas content goes here -->

    </div>

 

    <div class="off-canvas-content" data-off-canvas-content>

        <!-- Your page content lives here -->

 

        {{!-- 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-canvas6.4.3Sass

I installed foundation 6.4.3 sass version on my mac with foundation-cli. I run following commands

foundation new

name: test

foundation  zurb templates with sass

foundation watch;

browser opened (localhost:8000)

Default page is shown.

 

I am trying to add off-canvas to default.html  with following code. But it is not working. Nothing happens

What am i missing?

 

{{!-- This is the base layout for your project, and will be used on every page. --}}

 

<!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 for Sites</title>

    <link rel="stylesheet" href="{{root}}assets/css/app.css">

</head>

 

<body>

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

        <!-- Your menu or Off-canvas content goes here -->

    </div>

 

    <div class="off-canvas-content" data-off-canvas-content>

        <!-- Your page content lives here -->

 

        {{!-- 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>

khiem over 1 year ago

thanks u, bro