Here is a link that I have:
If you click on the skip button in the middle, it will take you to the next slide where Foundation 6 off-canvas is implemented.
The header containing the toggle button for the off-canvas menu is located outside of the menu itself and appears like this:
<header class="fixed close">
<div class="hamburger" data-toggle="sth">
<button type="button>
<span></span>
<span></span>
<span></span>
</button>
<span class="menu">Menu</span>
</div>
<div class="logo">
<h1>Aldemar</h1>
<span>productions</span>
</div>
<span class="mail-icon float-right" data-open="contact-us">
</span>
</header>
I have included the following JavaScript code to close the off-canvas menu:
$('.hamburger').on('click', function(e){
e.preventDefault();
if($('header').hasClass('close')){
$('header').removeClass('close').addClass('open');
$(this).find('button').toggleClass('open');
$('body').addClass('block-view');
}
else {
$('.off-canvas').foundation('close');
$('header').removeClass('open').addClass('close');
$(this).find("button").toggleClass('open');
$('body').removeClass('block-view');
$('#sth').foundation('close');
}
});
However, there seems to be an issue with this part: $('#sth').foundation('close'); as it does not successfully close the menu.