Menu icon Foundation
Foundation 5 Off-Canvas Menu Toggle not working

Hello,
While trying to get Foundation works on a forum theme, I found out a problem with the offcanvas menu, which is the toggle does not functional.
This is my javascript assets at that moment

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/foundation.min.js"></script>
<script>$(document).foundation();</script>

But when I added the all.js from docs page, everything works well.

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//foundation.zurb.com/docs/assets/js/all.js"></script>
<script>$(document).foundation();</script>

Have I made a mistake, or something happened?

help

Hello,
While trying to get Foundation works on a forum theme, I found out a problem with the offcanvas menu, which is the toggle does not functional.
This is my javascript assets at that moment

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/foundation.min.js"></script>
<script>$(document).foundation();</script>

But when I added the all.js from docs page, everything works well.

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//foundation.zurb.com/docs/assets/js/all.js"></script>
<script>$(document).foundation();</script>

Have I made a mistake, or something happened?

Jake Wilson about 6 years ago

You forgot to include the offcanvas javascript:

...
<script src="/js/foundation/foundation.min.js></script>
<script src="/js/foundation/foundation.offcanvas.js></script>
...

Feather Light about 6 years ago

Hello, maxwell
All experienced the same problem when using foundation 5.0 initial release
Now off the canvas toggle menu has been running well on v.5.0.2
Try downloading the latest version of the foundation and make sure all the required assets is loaded

For Jake Wilson, sorry but I think your way is not true, for running Ok, your code is running well
But foundation.min.js has covered everything including off canvas, so if you added offcanvas.min again after foundation.min it was a waste of assets. I think it's sure if you use foundation.js and foundation.offcanvas.js

See http://foundation.zurb.com/docs/javascript.html

<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<!-- or individually -->

<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.js"></script>
<script src="/js/foundation.offcanvas.js"></script>
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>

John Nguyen almost 6 years ago

I have the same problem. Tried everything from Feather Light. Still does not work. It this a bug?

John Nguyen almost 6 years ago

I figured it out.

Make sure:

is like:

Need to remove the forward slash before the "js".

Also make sure this is right before the closing body tag and not in the head.

No bug. It works perfectly!

John Nguyen almost 6 years ago

Sorry..

Make sure:

<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

Is like this:

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>

Be sure remove the forward slash before "js" since it is relative.

Feather Light almost 6 years ago

Hello John Nguyen,
I write there with the forward slash is just an example of course, it's just an example from the documentation link above,
For the forward slash is relative, as I said try to check whether important asset you need is already loaded.

Whether the issue had been resolved John Nguyen or Maxwell ?
If you succeed, congratulations :D
But if there is still a problem, try to check on whether all the assets or script needed are loaded, and see if there is a javascript console error

Thanks..

Maxwell Le almost 6 years ago

Sorry, but I forgot to tell that I am using Foundation 5.0.2 when this issue happened.

Drxw Lwrnc almost 6 years ago

The problem doesn't seem to have been addressed here. While all responses were correct, the off-canvas menu still will not function if you do not include the following:

 <script>$(document).foundation();</script>

That line is crucial for functionality and can easily be missed. Anyone having this problem in the future, will likely be related to missing the line above.

To be clear, that line should go below all your other scripts to look like:

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

Vanessa Lee over 5 years ago

Hey guys,

Trying out 5.2.1 and I also have been pulling my hair out trying to debug off-canvas.

I'm using Foundation with Angular.

Here's my setup:

<!DOCTYPE html>
<html lang="en" ng-app='xxxxx'>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Vanessa's Angular Seed</title>

    <!-- Foundation CSS -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />

    <!-- Application CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>

    <div><!-- Admin Homepage Partial -->
<div>
  <div class="off-canvas-wrap">
    <div class="inner-wrap">

      <a class="left-off-canvas-toggle" href="#" >Menu</a> 

      <!-- Off Canvas Menu -->
      <aside class="left-off-canvas-menu">
          <!-- whatever you want goes here -->
          <h6>{{ blogName }}</h6>

      <ul class="side-nav">
        <li ng-repeat="item in sidebar">
          <a href={{item.url}}>{{item.value}}</a>
        </li>
      </ul>
      </aside>

      <!-- main content goes here -->
       Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

    <!-- close the off-canvas menu -->
    <a class="exit-off-canvas"></a>

    </div>
  </div>
</div></div>

    <!-- Foundation JS dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.offcanvas.js"></script>

    <!-- AngularJS core -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>

    <!-- AngularJS app files -->
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script> $(document).foundation(); </script>
  </body>
</html>

When I step through the code, it looks like the toggleclass in the .left-off-canvas-menu event handler isn't adding the "move-right" class that it needs to.

Any help would be great!

Drxw Lwrnc over 5 years ago

Hey Vanessa,

Check your jQuery version. I ran your code using the jQuery hosted CDN, rather than the ajax one you're using - and it worked fine.

Here is what I used:

 <script src="http://code.jquery.com/jquery-1.7.min.js"></script>

Below is what you used, which didn't work for me either:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Replacing those two CDNs will make your code work with jQuery - however, I ran this code without linking to AngularJS - so to prevent breaking any possible Angular code from breaking, lets use both the latest google hosted jQuery CDN and the latest AngularJS CDN, and the combination of the two should play nice together.

Below are the scripts with the latest CDNs in order, that I got to work using your code:

 <!-- Foundation JS dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.offcanvas.js"></script>

    <!-- AngularJS core -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>

    <!-- AngularJS app files -->
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script> $(document).foundation(); </script>
  </body>

Hope that helps.

Alejandro Maliachi Quintana about 5 years ago

Well, I just take my time to read the documentation, look at forums (not only this one) and here is the answer to make the Off Canvas Navigation work:

In the head tag, you must link the css files and the modernizr files like this example:

<head>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>

Then, to make navigation works, you must wrote the jquery.js, foundation.min.js and the Initialize foundation function BEFORE closing the body tag, like this:

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
</body>
</html>