Search code examples
zurb-foundationzurb-foundation-6off-canvas-menu

Zurb Foundation - Callback after off canvas animation

I am using the standard example for off canvas navigation in foundation like this...

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

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- 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>
    <!-- Your page content lives here -->
  </div>
</body>

I am looking for a way to trigger a jquery CSS function after the animation has finished.

I have this so far..

$( document ).on( "close.offcanvas", function( e ){
    //$('.pagination').css('display','block');
});

But this triggers when the open button is clicked, does anybody know if the are any callbacks or similar that I can use so that the CSS is applied only after the off canvas animation has finished?

Solution

  • Foundation includes an 'opened' and 'closed' event for this purpose: https://foundation.zurb.com/sites/docs/off-canvas.html#js-events

    In the code example below I output a message to the console when the menu is closed.

    $(document).foundation()

$('#offCanvas').on('closed.zf.offcanvas', function(event) {
  //$('.pagination').css('display','block');
  console.log("Off-canvas menu was closed.")
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>

<div class="off-canvas position-left" 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>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>

</div>

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
  <button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>