3

I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work.

So I followed guide on how to make off-canvas menu on Foundation 6 docs and it works. This part is okay. Now when I click on some link menu just stays there and I want it to close. Does anyone know how to fix that.

I've found snippet that should do the trick but my menu stops showing after I appy this JS. Others report the same problem.

$(document).foundation({
  offcanvas : {
    open_method: 'move', // Sets method in which offcanvas opens, can also be 'overlap'
    close_on_click : true
  }
});

Here are the docs, but since I don't know much about JavaScript I beg someone to write correct code.

Eric Aya
  • 68,765
  • 33
  • 165
  • 232
Kira
  • 1,455
  • 4
  • 22
  • 42

2 Answers2

8

You could use the close method on the .off-canvas menu when a link is clicked:

$('.off-canvas a').on('click', function() {
    $('.off-canvas').foundation('close');
});

Click Here for a demo.

Yass
  • 2,600
  • 3
  • 11
  • 21
  • Works perfect. It is just what I needed. Thanks! – Kira Mar 12 '16 at 10:20
  • Doesnt work as it stoped close it self on click. If we click again on menu item it should close, but with this code it stoped. – fdrv Mar 01 '17 at 13:58
1

In advance, sorry for my poor english,

Just go through online to figure it out, and finally, the script above that Yass provided is working. But when i inserted Slick slider script in, it no longer worked.

i just found out a solution that worked for me, but maybe there have bug, dunno.

Inside foundation offcanvas documentation, a close button to close the canvas is given, like below showed.

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

So I adapted it and put the "data-close" to the link, when i clicked, it scroll to the specific div and close up canvas

And here is the link for more understanding? because i think my explanation sucks

https://jsfiddle.net/mbsj7d7p/

Shinno
  • 11
  • 2