Lightweight Off-Canvas Menu with jQuery and CSS3

A lightweight mobile App-style off-canvas navigation menu using jQuery toggleClass() function, CSS flexible box layout and CSS3 transitions & transforms.

How to use it:

1. Create the Html for a sidebar off-canvas menu.

<div class="sidebar"></div>

2. Create a link to toggle the off-canvas menu and then wrap it together with your main content in a container element with CSS class of 'content'.

<div class="content">
  <a class="button"></a>
  Your main content goes here
</div>

3. The required CSS styles.

.sidebar {
  position: absolute;
  width: 260px;
}

.content {
  flex: 1;
  padding: 30px;
  background: #333;
  box-shadow: 0 0 5px black;
  transform: translate3d(0, 0, 0);
  transition: transform .3s;
}

.content.isOpen { transform: translate3d(260px, 0, 0); }

3. Include the required prefix-free JS library to process elements with a style attribute and add a vendor prefix where needed.

<script src="prefixfree.min.js"></script>

4. Include the latest version of jQuery library at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

5. Enable the off-canvas menu with a little javascript in jQuery.

$('.button').on('click', function() {
  $('.content').toggleClass('isOpen');
});

---

This awesome jQuery plugin is developed by studio-klik-hr. For more Advanced Usages, please check the demo page or visit the official website.