Sidebar Slide-In Menu with jQuery and CSS3

File Size: 2.37 KB
Views Total: 14257
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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;
} {
  -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() {

$("#trigger").click(function() {

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