title: close off canvas menu after click links foundation
body: <p>I have set up my site with an off canvas menu when it goes mobile</p>
  
  <pre><code>&lt;html class="no-js" lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt; Mobile Application&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/normalize.css" /&gt;
      &lt;link rel="stylesheet" href="css/foundation.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom-mobile-portrait.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom-mobile-landscape.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom-xlarge.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom-ipad.css" /&gt;
      &lt;link rel="stylesheet" href="css/custom-ipad-portrait.css" /&gt;
      &lt;link rel="stylesheet" href="css/font-sizes.css" /&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'&gt;
      &lt;script src="js/vendor/modernizr.js"&gt;&lt;/script&gt;
      &lt;a name="head"&gt;&lt;/a&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="off-canvas-wrap mobile-menu" data-offcanvas&gt;
          &lt;div class="inner-wrap"&gt;
              &lt;nav class=" tab-bar hidden-for-large-up" data-topbar "&gt;  
            &lt;section class="left-small "&gt;
              &lt;a class="left-off-canvas-toggle menu-icon " href="# "&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/section&gt;
  
         &lt;section class="middle tab-bar-section "&gt;
  
      &lt;a href="http://mysite.url "&gt;   &lt;/a&gt;
  
            &lt;/section&gt;
  
  
          &lt;/nav&gt;
  
          &lt;aside class="left-off-canvas-menu "&gt;
            &lt;ul class="off-canvas-list "&gt;
              &lt;li&gt;&lt;label&gt;Dehumaniser App&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#top "&gt;&lt;STRONG&gt;TOP&lt;/STRONG&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#overview "&gt;&lt;STRONG&gt;APP OVERVIEW&lt;/STRONG&gt;&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#how "&gt;&lt;STRONG&gt;HOW DOES IT WORK&lt;/STRONG&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#features " &gt;&lt;STRONG&gt;FEATURES&lt;/STRONG&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#gallery "&gt;&lt;STRONG&gt;GALLERY&lt;/STRONG&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/aside&gt;
  
         &lt;!--  &lt;aside class="right-off-canvas-menu "&gt;
            &lt;ul class="off-canvas-list "&gt;
              &lt;li&gt;&lt;label&gt;Users&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="# "&gt;Hari Seldon&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="# "&gt;...&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/aside&gt; --&gt;
  
          &lt;section class="main-section "&gt;
  </code></pre>
  
  <p>i put my site content in here and then after my code finishes:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;script src="js/vendor/fastclick.js"&gt;&lt;/script&gt;
  &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/foundation/foundation.js"&gt;&lt;/script&gt;
  &lt;script src="js/foundation/foundation.offcanvas.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" /&gt;
  &lt;script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/myscript.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/foundation/foundation.topbar.js"&gt;&lt;/script&gt;
  &lt;script src="js/foundation/foundation.orbit.js"&gt;&lt;/script&gt;
  &lt;script src="js/myscript.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
          jQuery('.single-item').slick();
      });
  &lt;/script&gt;
  
  
  
  
  
  &lt;script type="text/javascript"&gt;
      jQuery(document).foundation()
  &lt;/script&gt;
  
  
  
  &lt;/section&gt;
  
  &lt;a class="exit-off-canvas"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script&gt;
      jQuery(document).foundation();
      jQuery('a.left-off-canvas-toggle').on('click', function() {
  
      });
  &lt;/script&gt;
  
  &lt;div id="fixedbutton"&gt;
      &lt;a href="#head"&gt;&lt;img src="img/upbutton.png"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I get the proper off canvas behavior (I get the three lines box . when I click the box it opens, and the off-canvas menu appears) but when I click a menu link even though the page scrolls smoothly down the off-canvas menu doesn't close. How can I fix this?</p>