Menu icon Foundation
Off-canvas menu links auto close

Is there a way to make specific links inside the off-canvas menu to not trigger the close off-canvas? right now it seems that all links, when clicked, remove the "move-right" or "move-left" class. I am using the off-canvas to display more than links, see image below:

Screen shot 2014 03 13 at 3.41.10 pm

You can see there are some 'filter links' and the "Load More" button, but when I click any of those they all close the offcanvas menu. This only start happening after I updated to foundation 5.2.

Any help will be appreciated.

Here is a link to the project where you can see the issue more clear:

http://dev.conceptualsky.com/

Click the "Projects" link on the right top to show the off-canvas menu

UPDATE:

I change some lines of code on foundation.js and make it to work as I want it, tho I wold love to not hack foundation,js file to avoid overwriting of my code on future updates on foundation framework.

The line I modified 3213

// I added the class .close-off-canvas to the anchor, so on my html I need to use that class if I want a link to close the off-canvas menu

//.on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {

.on('click.fndtn.offcanvas', '.left-off-canvas-menu a.close-off-canvas', function (e) {
    e.preventDefault();
    var href = $(this).attr('href');
    S('.off-canvas-wrap').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
    window.location = href
    S('.off-canvas-wrap').off('transitionend webkitTransitionEnd oTransitionEnd');
    });
    S(".off-canvas-wrap").removeClass("move-right");
})
            

         

autocloseoff-canvasoff-canvas-menu

Is there a way to make specific links inside the off-canvas menu to not trigger the close off-canvas? right now it seems that all links, when clicked, remove the "move-right" or "move-left" class. I am using the off-canvas to display more than links, see image below:

Screen shot 2014 03 13 at 3.41.10 pm

You can see there are some 'filter links' and the "Load More" button, but when I click any of those they all close the offcanvas menu. This only start happening after I updated to foundation 5.2.

Any help will be appreciated.

Here is a link to the project where you can see the issue more clear:

http://dev.conceptualsky.com/

Click the "Projects" link on the right top to show the off-canvas menu

UPDATE:

I change some lines of code on foundation.js and make it to work as I want it, tho I wold love to not hack foundation,js file to avoid overwriting of my code on future updates on foundation framework.

The line I modified 3213

// I added the class .close-off-canvas to the anchor, so on my html I need to use that class if I want a link to close the off-canvas menu

//.on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {

.on('click.fndtn.offcanvas', '.left-off-canvas-menu a.close-off-canvas', function (e) {
    e.preventDefault();
    var href = $(this).attr('href');
    S('.off-canvas-wrap').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
    window.location = href
    S('.off-canvas-wrap').off('transitionend webkitTransitionEnd oTransitionEnd');
    });
    S(".off-canvas-wrap").removeClass("move-right");
})
            

         
Tomasz Brudziński over 5 years ago

I've got exactly the same problem... did you manage to workaround this eventually?

Alan Ashbaugh over 5 years ago

Try passing a parameter to offcanvas when you initialize Foundation. (This is not tested fully)
```
// initialize foundation
$$(document).foundation({
// Prevent offcanvas menu from closing when you click on it
offcanvas: {
close_on_click: false
}
});