jQuery & CSS3 Based Simple Off-canvas Sliding Menu

Just another jQuery and CSS3 transitions & transforms based off-canvas navigation system for your web site/app.When you click a trigger, a sidebar menu slides out from the left hand side of your screen and shrinks the document content with a transparent mask.

How to use it:

1. Create an off-canvas menu using Html unordered list.

<div class="menu">
  <ul>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
  </ul>
</div>

2. The CSS to style the menu whatever you like.

.menu {
  width: 20%;
  height: 100vh;
  position: absolute;
  left: 0;
  display: none;
  background: #48A770;
  z-index: 10;
}

.menu ul,
.menu li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu li {
  background: #48A770;
  color: #D2E1CB;
  padding: 10px 20px;
  border-bottom: 1px solid #275B3D;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.menu li:hover {
  background: #275B3D;
  cursor: pointer;
}

3. Wrap your document content into a container with class of 'content'.

<div class="content">
  <button class="appear_menu">Show Menu</button>
</div>

4. Create a mask DIV for the document content when the off-canvas menu is opened.

<div class="overlay"> </div>

5. The required CSS for the document content and mask DIV.

.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  display: none;
}

.content {
  width: 100%;
  height: 100vh;
  padding: 5% 0;
  background: #F3EFE0;
  margin: 0 auto;
  text-align: center;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.appear_menu {
  cursor: pointer;
  width: 150px;
  height: 50px;
  color: #fff;
  background: #48A770;
  border: 1px solid #48A770;
}

6. Include the necessary jQuery library at the end of your document.

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

7. A little Javascript(jQuery) to active the off-canvas menu.

$(document)
  .on('click', 'button', function() {
    $('.content').css({
    '-webkit-transform': 'scale(0.9)',
    '-moz-transform': 'scale(0.9)'
    });
    $('.overlay').fadeIn(800);
    appaMenu();
  })
  .on('click', '.overlay', function(){
    $('.content').css({
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)'
    });
    $(this).fadeOut(800);
    appaMenu();
  });

function appaMenu(){
  $( ".menu" ).toggle( "slide" );
}

---

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