Off Canvas Menu
I've put this together as a starting point for development. You won't find any pretty design, just the functionality you need to get it working so you can style it within your project. It's designed to be as light as possible, progressively enhanced and all that good stuff. I'm open to any suggestions or improvements...
Features
- lightweight - jQuery is only used to add and remove classes. Animation is via css transitions.
- design free - ready to integrate into your project, no need to strip out unwanted design.
- simple progressive enhancement - the menu will show in it's 'widescreen' mode if javascript is disabled.
Usage
Check out demo.html to get a picture of how this works. Here are a few notes to help out.
-
Link up offCanvasMenu.css in your pages head section (or add it to your build process to concatenate for extra speedy goodness).
-
Add jQuery followed by jquery.offCanvasMenu-0.1.js in the footer of your page using script tags.
-
Initialise the plugin with this code (place below the plugin's script tag):
$(document).ready(function() { OffCanvasMenu.init(); });
-
Adjust the media query max-width value (in offCanvasMenu.css) to set the width that hides the menu. The menu will be hidden off canvas for any screen width less than the value set.
Some notes:
For this to work properly there are some requirements to how you structure your code:
- div#ocm-outer-page-wrapper should wrap all your page content and is used to mask the content and stop scroll bars appearing when the menu is active.
- div#ocm-page-wrapper should be around all your content that you want to shift over when the menu is shown. Generally this would be placed directly after div#ocm-outer-page-wrapper but you may choose to exclude the footer from moving when the menu is shown by closing div#ocm-page-wrapper before the footer.
- Wrap your menu in nav.main-menu. This is what will be pushed off screen using some absolute positioning*.
- If javascript is disabled the menu will just display in it's natural position within the markup. You can get fancy and use :target to hide and show the menu without javascript although this is only supported in IE9+. More info in (this CSS Tricks article)[http://css-tricks.com/off-canvas-menu-with-css-target/].
*The absolute positioning allows for a height of 100% making for a full height background to the menu area. Be careful declaring position on any of .main-menu's parent elements as this will affect it's positioning. position: relative; is set on #page-wrapper.
Roadmap
Add swipe close (and maybe open?) functionality for touch devices
Credits
Made by (https://twitter.com/wesleyburden)[Wesley Burden] with help from cleverer people than me.
This is heavily based on David Bushell's code from this article on Smashing Magazine
