twitter facebook dribbble email

CSS Off-Canvas vs Responsive Lightboxes

Careful! This post is looking a little old and could be inaccurate in many, many ways

When I first came across David Bushell’s technique for a CSS only Off-Canvas Navigation Menu I had to try it out. It seemed a more beautiful solution to select boxes or link lists on mobile screen sizes.

So I used it on this website with no issue.

But when it came to more complex websites issues inevitably cropped up, but these aren’t just attributed to the CSS only version that David released. One such flaw of the Off-Canvas technique is the menu will open at the top of the website, not the screen. So links that open the menu may not bring the menu into view if that link is too far down the page.

But the exotic nature of some of the CSS in David’s version also causes some issues; mainly 3D transforms. Browser support for these is still young and so there’s always going to be a few bugs here and there. One such bug is the website will flicker and redraw a couple of times on load. To solve this use the following CSS is required:

Initially this solved all the major issues with the technique and two new websites will be launched with this technique. However future websites will likely not.

Lightbox Issue

The biggest issue came when trying to implement a responsive lightbox. The code above actually screws with all the responsive lightbox plugins I attempted and would make the image appear off screen.

I didn’t want to change the implementation of the navigation as the websites were virtually complete. The only alternative I found was the implement a basic lightbox script, that while nicely lightweight is very limited in both functionality and design.

But unfortunately the lightbox issue is one issue too far for future website. With so many workarounds it feels like one small knock and the dominoes that are the website will come tumbling down.

I prefer code to be as simple and modular as possible. So the nest website using the Off-Canvas technique will be using a JavaScript solution; at least until browser support proves if the fix above is for a bug or something more permanent.