OnCanvas: a Method for Better Web Sidebars

On Canvas is a method my coworker and I developed to allow intuitive and semantic slider menus for responsive websites. It is essentially opposite of the (apparently) popular off canvas technique. The idea for OnCanvas is simple: instead of positioning the menu elements outside the browser window and sliding them in via a body class, we absolutely position the menus behind our main element and use a body class to slide that main element over, revealing the menu.

The main benefit we found was that only one element must be acted upon in order to accomplish the sliding action. From an aesthetics standpoint, a slide transition like this looks more “natural” than many Off Canvas implementations I’ve seen. Additionally, our DOM seems to be presented in a cleaner fashion and the manipulations require minimal JavaScript.

Now, I might be late to the party on this, and there might be some yet-undiscovered reason for not using this method, but our research didn’t turn up any sources that used a similar method, and we couldn’t find any browser or performance issues. I am planning to investigate further and compare to existing methods as I continue to refine the technique.

If you like the idea, let me know. I’m working on a kick-ass template for this in HAML and SASS and I’d love to have some feedback.

View it as a Gist on Github or play with it on Codepen.