Menu icon Foundation
Responsive Off-canvas

I've been looking through the examples and code for creating off-canvas components in Foundation, located here, and have found one thing that I can't quite figure out.

The current design I am working on turning into code uses a fixed-width-ish left sidebar which contains a header (user information/image), as well as a navigation menu. The way I am hoping to have it work is to have the component remain on-canvas/fully visible when viewed from computers and tablets, but off-canvas on a mobile device, such as a smartphone or PMP like the iPod Touch.

Any ideas?

sidebaroff-canvason-canvasResponsive

I've been looking through the examples and code for creating off-canvas components in Foundation, located here, and have found one thing that I can't quite figure out.

The current design I am working on turning into code uses a fixed-width-ish left sidebar which contains a header (user information/image), as well as a navigation menu. The way I am hoping to have it work is to have the component remain on-canvas/fully visible when viewed from computers and tablets, but off-canvas on a mobile device, such as a smartphone or PMP like the iPod Touch.

Any ideas?

Karl Ward over 5 years ago

I been working with the off-canvas menu, and I'm afraid that is not a solution. The off-canvas menu is designed to be off-canvas, and you would need to hack it to pieces to get it to work as a visible left-sidebar from larger screens ... it just isn't created to be used as a visible sidebar.

The best thing to do, is create your left sidebar independently, and instead use a visibility-class to hide the menu at the same breakpoint where your off-canvas menu will display. Technically, you could use the same inner html code for both the elements ... Another idea is to use a line of JS to clone the inner html of your sidebar into the off-canvas menu on page load.

Thanh Nguyen over 5 years ago

Thanks Karl. I've seen it done on sites implementing skeljs (like this http://html5up.net/prologue/), so was just looking into ways to have that implemented on Foundation. Ideally, I'd like to stick to Foundation, so I'll have a look and see if I can't try to use javascript there.

Karl Ward over 5 years ago

yup, the off-canvas menu in that link can be toggled to be both side-menu and off-canvas on smaller screens ... it looks nice.

To be honest with you, I am slightly disappointed with the Foundation 5 off-canvas menu. At initial glance it looks great, but it seems to have been created without considering aspects of how it can- and should be used. It is more like "here is an off-canvas menu toggle that you can put up there bye".

  • It won't work properly as a fixed position menu, which in my opinion is unacceptable as this is a necessary feature for many mobile sites.

  • It is attached to the main content in such a way that it was never intended to be shown as a visible "side menu" on larger screens.

You can hack it slightly (which I have done), but the result is not entirely satisfactory. If I was you, I would consider a 3rd party off-canvas solution.

Brandon Arnold over 5 years ago

Hey Karl,
Off Canvas is definitely in its infancy at this stage, but we plan on adding and improving on it in releases to come. If you have any things that you have done and think should be part of the solution for the community, feel free to submit a PR on Github. We'd love to check it out and love getting contributions from the community. Open source is a beautiful thing :)

Happy Coding,
Brandon

roxanne sutton over 5 years ago

Hi, i found this due to the same needs. I would like a visible horizontal menu at large sizes, that is off-canvas at mobile sizes. I found a very accessible tutorial at http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
that may help those who wish this configuration.

Roman over 5 years ago

I have the same requirement, I want a collapsible side menu, but on desktops I need it to not be off canvas but rather push the main content to the right (maybe with a margin or padding?) and on mobiles I want it to be off-canvas.

I'm trying to use the foundation off-canvas menu and hacking it to do transform: translate3d(0%, 0, 0) as well as adding padding-left: 220px to the main content div. This works, but foundation does all kinds of strange things with javascript to disable links in the off-canvas menu :( - Looks like I'm going to have to do it from scratch :(

mark davies over 5 years ago

Add me to the list!
I want the same functionality as http://html5up.net/prologue
I would really prefer to stick with foundation, has anyone got this working....seems like a basic requirement so pretty surprised its not included

if not, anyone got any other suggestions?

Karl Ward over 5 years ago

I seem to remember seeing a link from somebody who had achieved the above, but I can't remember where ... likely it is in one of the many off-canvas posts in this forum.

It would not be that hard to create a sidebar menu that goes invisible when the off-canvas is displaying. However, that would technically require creating two separate menus and toggling their visibility. You could also easily use javascript to simply create/copy contents of one menu to the other on page load ...

I think it will take some time until this is built into the off-canvas menu, because it goes against the technical nature of how its created currently. You may need to consider workarounds ...