Pretty Off-canvas Sidebar Navigation with jQuery and CSS3

A jQuery/CSS3 based off-canvas sidebar navigation that slides in from the left when toggled and covers the main content with a gradient overlay.

How to use it:

1. The Html structure for the off-canvas sidebar navigation with a toggle button.

<div class="navigation" id="navigation">
  <a class="nav-toggler" href="#" id="navToggler">
    <span class="show-nav">&#9776;</span>
    <span class="hide-nav">&times;</span>
  </a>
  <div class="navigation__inner">
    <ul>
      <li>
        <h2>Nav</h2>
      </li>
      <li><a class="current" href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Blog</a></li>
      <li class="separator"></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>

2. The core CSS/CSS3 to style the off-canvas navigation.

.navigation {
  background: #35403c;
  height: 100%;
  position: absolute;
  transition: all .3s ease-in-out;
  z-index: 5;
}

.navigation,
.navigation a { color: white; }

.navigation.expanded {
  background: #1e2422;
  box-shadow: 100px 0 300px 300px rgba(0, 0, 0, 0.5);
}

.navigation.expanded + .content {
  transform: translate3d(50px, 0, 0) rotateY(-10deg);
  transform-origin: 90% 50%;
  transform-style: preserve-3d;
}

.nav-toggler {
  display: inline-block;
  font-size: 26px;
  left: 100%;
  padding: .5em;
  position: absolute;
  text-decoration: none;
}

.nav-toggler span {
  position: relative;
  z-index: 5;
}

.nav-toggler .hide-nav { display: none; }

.expanded .nav-toggler .show-nav { display: none; }

.expanded .nav-toggler .hide-nav { display: inline-block; }

.expanded .nav-toggler:after { border-color: #1e2422 transparent transparent transparent; }

.nav-toggler:after {
  border-style: solid;
  border-width: 100px 100px 0 0;
  border-color: #35403c transparent transparent transparent;
  content: "";
  height: 0;
  left: 0px;
  position: absolute;
  top: 0px;
  transition: border-color .3s ease-in-out;
  width: 0;
}

.navigation__inner {
  font-size: 22px;
  overflow: hidden;
  transition: all .3s ease-in-out;
  width: 0;
}

.expanded .navigation__inner {
  display: block;
  width: 250px;
}

.navigation__inner h2 {
  font-size: 1.2em;
  font-weight: 400;
  margin: 0.5em 1.5em 1.2em;
}

.navigation__inner ul {
  list-style: none;
  margin: 0;
  padding: 1em 0;
}

.navigation__inner li.separator {
  border-bottom: 1px solid white;
  margin: 1.5em 0 .5em;
}

.navigation__inner a {
  border-left: 0 solid #cf3e27;
  display: block;
  padding: .5em 2em;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.navigation__inner a.current {
  background: #191f1d;
  border-left-width: 10px;
}

.navigation__inner a:hover {
  background: #101312;
  border-left-width: 10px;
}

3. Wrap the main content into a container with position: relative;.

<style>
.content {
  position: relative;
  transition: all .3s ease-in-out;
}
</style>

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

4. The Javascript to enable the off-canvas navigation. Include the following JavaScript snippets after the jQuery JavaScript library.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
(function ($, window, document, undefined) {
  $(function () {
    var $navigation = $('#navigation'), $navToggler = $('#navToggler');
    $('#navToggler').on('click', function (e) {
      e.preventDefault();
      $navigation.toggleClass('expanded');
    });
  });
}(jQuery, this, this.document));
</script>

---

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