Menu icon Foundation
Off-Canvas Menu Close_On_Click Help

The documentation for the off-canvas menu's close_on_click configuration is contradictory, and nothing that I've tried actually closes the menu. A little help would be appreciated.

On the Off-Canvas page of the documentation, it is stated that close_on_click is set to false by default. On the Javascript Set-up page, in the "chart of of all the available data-options", it states the opposite. Which is it?

Regardless, nothing that I've tried works -- assuming the behavior should be that the off-canvas menu slides back off page when a nav link (read: not the menu icon) is clicked.

I have tried this as a data attribute, and currently have the following just before the closing body tag (which is exactly what is present on the off-canvas documentation page:

<script>
        $(document).foundation({
          offcanvas : {
            close_on_click : true
  });
    </script>
            

         

off-canvas menu

The documentation for the off-canvas menu's close_on_click configuration is contradictory, and nothing that I've tried actually closes the menu. A little help would be appreciated.

On the Off-Canvas page of the documentation, it is stated that close_on_click is set to false by default. On the Javascript Set-up page, in the "chart of of all the available data-options", it states the opposite. Which is it?

Regardless, nothing that I've tried works -- assuming the behavior should be that the off-canvas menu slides back off page when a nav link (read: not the menu icon) is clicked.

I have tried this as a data attribute, and currently have the following just before the closing body tag (which is exactly what is present on the off-canvas documentation page:

<script>
        $(document).foundation({
          offcanvas : {
            close_on_click : true
  });
    </script>
            

         

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

Wesley Picotte over 4 years ago

Thanks. I think that was a copy/paste error, but I'm a JS and Foundation newby so could have been my error. In any event, I have applied your code but still to no avail.

Beginner question here:

It's fine to place this code into app.js, so long as it's called after foundation.js and offcanvas.js, correct?

Rafi Benkual over 4 years ago

Your code had a syntax error. It should be

 $(document).foundation({
  offcanvas : {
    close_on_click : true
  }
});

You can see it in action here: http://codepen.io/rafibomb/pen/PwpJVm