Minimal Drawer Sidebar Plugin with jQuery - Sidebar.js

Sidebar.js is an ultra-light jQuery plugin used to create a tabbed drawer sidebar that slides out from the edge of the screen on mouse hover. Great for sliding contact or feedback forms.

See also:

• jQuery Plugin To Create Sliding Drawer Panels - cabinet
• jQuery Plugin For Floating Sidebar Drawer Panel - Side Slider
• jQuery Plugin For Slide Out Tab contact - tabSlideOut

How to use it:

1. Create a drawer sidebar positioned on the right side of the browser window.

<div id="sidebar" data-position="right">
  <div class="icons">
    <div class="icon" data-content="content1"> 
      <img src="img/icon.png"> 
    </div>
    <div class="icon" data-content="content2"> 
      <img src="img/icon.png"> 
    </div>
  </div>
  <div class="contents">
    <div class="content hide" data-content="content1">
      <h3> Panel 1 </h3>
      <p> Content 1 </p>
    </div>
    <div class="content hide" data-content="content2">
      <h3> Panel 2 </h3>
      <p> Content 2 </p>
    </div>
  </div>
</div>

2. Load jQuery library and the jQuery Sidebar.js plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="js/sidebar.js"></script>

3. Add your own CSS styles to the sidebar.

#sidebar {
  position: fixed;
  top: 40%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#sidebar[data-position="right"] { right: -350px; }

#sidebar[data-position="right"].open {
  -webkit-transform: translate3d(-350px, 0, 0);
  transform: translate3d(-350px, 0, 0);
}

#sidebar[data-position="right"] .icons { float: left; }

#sidebar .icons {
  width: 50px;
  float: left;
}

#sidebar .icons .icon {
  background-color: #ECF0F1;
  margin-bottom: 5px;
}

#sidebar .icons .icon:hover { background-color: #61B2A0; }

#sidebar .icons .icon:last-child { margin-bottom: 0px; }

#sidebar .icons .icon.active { background-color: #61B2A0; }

#sidebar .icons .icon span {
  margin: 0.34em;
  color: white;
  font-size: 1.5em;
}

#sidebar .icons .icon img {
  width: 40px;
  margin: 5px;
}

#sidebar .contents {
  width: 350px;
  height: 450px;
  float: left;
  background-color: #61B2A0;
  overflow-y: auto;
  overflow-x: hidden;
}

#sidebar .contents .content {
  padding: 5px 25px 25px 25px;
  color: white;
}

#sidebar .contents .content.hide { display: none; }

#sidebar .contents .content.show { display: block; }

#sidebar .contents .content h3 { color: white; }

#sidebar .contents .content ul {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;
}

#sidebar .contents .content ul li { margin-bottom: 15px; }

#sidebar .contents .content ul li:last-child { margin-bottom: 0px; }

#sidebar .contents .content img { max-width: 100%; }

Change log:

2016-02-05

• touchscroll and in/out

---

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