Drawer: jank free sliding sidebar layouts

What?

Drawer is a starting point for building 2-column responsive layouts that implement a smooth sliding sidebar (or drawer).

The default behaviour is as follows:

On smaller viewport sizes: the drawer is hidden by default. When the drawer is shown, the content is shifted to the right, whilst maintaining its width.
Toggle drawer (on smaller viewports only)

On larger viewport sizes: the drawer is always shown (toggling makes no difference). Content fills the remaining space.

Why?

The project was created to fulfil the following requirements:

• It should include jank free sliding transitions, by making use of hardware accelerated properties (i.e. CSS transforms).
• It should not break native scrolling controls: the main content should be scrollable using page up/down keys, as well as by using the tap-status-bar-to-return-to-top behaviour.
• Very few (if any) external dependencies, to keep it lightweight and easy to customise.
• Leave most of the interaction/visual design to the implementer.

There are a few other implementations of the general UI pattern, but it was difficult to find one that fulfilled all of the above.

Usage

1. Add the following meta viewport tag:

   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

2. Include the drawer.css stylesheet
3. Wrap your sidebar content in an element with a class of drawer
4. Wrap any content that “butts up” to the drawer in an element with a class of drawer-butt. (This will usually be your main content, but it may also be a header, for example. See simple example.)
5. Read the drawer.css source code, and customise as you wish.

6. Toggle the drawer by adding/removing the drawer-open class to the body element.

   For example, if you had a toggle element with a data-drawer-toggle attribute, you might toggle the drawer with jQuery, as follows:

   $(document).on('click touchstart', '[data-drawer-toggle]', function() {
       $('body').toggleClass('drawer-open');
   });

Browser Support

Drawer has been designed to work with modern browers i.e. recent versions of Chrome, Firefox, Safari, Opera, and Internet Explorer (although sliding animations will not work in IE9). IE 7/8 users will see the two-column version of the site (toggling will have no effect).

Examples

• A toggle button that appears on smaller viewport sizes
• A responsive navigation bar example

Bibliography

Drawer uses ideas from the following resources:

• Mailchimp Pattern Library
• Multi-Device Layout Patterns by Luke Wroblewski
• Off Canvas: A Multi-Device Web Layout Pattern by Jason Weaver
• Jank Free

Licence

Drawer is copyright © 2013 Dom Christie and is released under the MIT licence.