Stylish Off-canvas Sidebar Menu with jQuery and CSS3

Takes advantages of CSS3 transitions/transforms and a little jQuery magic to create a stylish, animated off-canvas sidebar menu for your websites or web applications. The menu opens with an elastic effect to bring up the intuitive idea that some control can be expanded from the left.

How to use it:

1. Include the Font Awesome Icon Font for menu toggle icons.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

2. Create a button to toggle the off-canvas sidebar menu.

<span class="menu_toggle"> 
  <i class="menu_open fa fa-bars fa-lg"></i>
  <i class="menu_close fa fa-times fa-lg"></i> 
</span>

3. Create a list of links for the menu.

<ul class="menu_items">
  <li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Home</a></li>
  <li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> About</a></li>
  <li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Contact</a></li>
</ul>

4. Wrap your main content into a container with the CSS class of 'content'.

<main class="content">
  <div class="content_inner">
      ...
  </div>
</main>

5. The CSS styles for the toggle button.

.menu_toggle {
  z-index: 900;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 100px;
  height: 80px;
  background-color: #F37272;
  border-bottom-right-radius: 100%;
}

.menu_toggle:active i { opacity: 0.8; }

.menu_toggle i { color: #f0f0f0; }

.menu_toggle .menu_open,
.menu_toggle .menu_close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -12px;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}

.menu_toggle .menu_open {
  -webkit-transform-origin: -100px -100px;
  -ms-transform-origin: -100px -100px;
  transform-origin: -100px -100px;
}

.menu_toggle .menu_close {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: -100px -160px;
  -ms-transform-origin: -100px -160px;
  transform-origin: -100px -160px;
}

6. The basic CSS/CSS3 styles for the off-canvas navigation menu.

.menu_items {
  position: fixed;
  bottom: 0;
  left: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu_items li {
  height: 60px;
  margin-bottom: 30px;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-transition: -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}

.menu_items li:nth-child(2) { margin-left: 40px; }

.menu_items li:nth-child(3) { margin-left: 80px; }

.menu_items a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a3a3a3;
  -webkit-transition: color .2s;
  transition: color .2s;
}

.menu_items a .icon {
  position: relative;
  display: inline-block;
  margin-right: 25px;
  color: #f0f0f0;
}

.menu_items a .icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  margin-left: -33px;
  margin-top: -32px;
  border-radius: 100%;
  border: 2px solid #f0f0f0;
  -webkit-transition: border-color .2s;
  transition: border-color .2s;
}

.menu_items a:hover { color: #f0f0f0; }

.menu_items a:hover .icon:after { border-color: #F37272; }

.menu_items a:active .icon { color: #F37272; }

7. Create the cool menu open effects using CSS3 transitions and transforms.

.menu_effect .content {
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.menu_effect .menu_open {
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.menu_effect .menu_close {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

.menu_effect .menu_items li {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu_effect .menu_items li:nth-child(2) {
  -webkit-transition-delay: .47s;
  transition-delay: .47s;
}

.menu_effect .menu_items li:nth-child(3) {
  -webkit-transition-delay: .48s;
  transition-delay: .48s;
}

8. Load the latest version of jQuery library at the bottom of your document and insert the following JavaScript snippets to enable the off-canvas sidebar menu.

var $page = $('.page');
$('.menu_toggle').click(function () {
    $page.toggleClass('menu_effect');
});
$('.content').click(function () {
    $page.removeClass('menu_effect');
});

---

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