Sidebar Slide-In Menu with jQuery and CSS3

A sidebar navigation that utilizes CSS3 transforms and transitions to slide in/out an off-canvas menu with smooth animations. jQuery is used to add/remove CSS classes as needed.

How to use it:

1. Create a menu list for the sidebar navigation.

<div id="menu">
  <ul>
    <li>Home</li>
    <li>Works</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

2. Create a trigger element to toggle the sidebar navigation.

<div id="trigger"> Click Here! </div>

3. The required CSS/CSS3 styles.

#menu {
  background: #2c3e50;
  position: absolute;
  padding: 0 64px;
  height: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
  transform: translate(-150%, 0px);
  transition: all 0.75s ease-in-out;
}

#menu ul {
  margin: 16px 0;
  padding: 0;
  color: white;
  list-style: none;
}

#menu ul li {
  margin: 16px 0;
  transition: all 0.25s ease-in-out;
}

#menu ul li:hover {
  color: #bdc3c7;
  cursor: pointer;
}

#menu.active {
  -webkit-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
  transition: all 0.75s ease-in-out;
}

4. The javascript (jQuery) to toggle the CSS classes as you click on the trigger element.

$("#trigger").click(function() {
  $("#menu").toggleClass("active");
});

$("#trigger").click(function() {
  $("#trigger").toggleClass("active");
});

---

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