Animated jQuery Sidebar Drawer Menu Plugin - Stripes

File Size: 48.4 KB
Views Total: 4499
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated jQuery Sidebar Drawer Menu Plugin - Stripes

Stripes is a jQuery based animated drawer navigation plugin that dynamically loads multi-level data from JSON data files.

How to use it:

1. Load the latest jQuery library and jQuery stripes plugin on your web page.

<script src=""></script>
<script src="static/jquery.stripes.js"></script>

2. Create a container for the drawer navigation. Use onClick javascript event to load sub-level data from a JSON data.

<div id="stripes"> 
<a href="#" onclick="$('#stripes').stripes('loadNext', this, 'data/jquery.json');">jQuery</a> 

3. The sample CSS to style the drawer navigation.

#stripes .stripe {
box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.6);
display: none;
height: 100%;
overflow: auto;
padding: 20px 8px;
position: absolute;
top: 0;
#stripes .loading {
margin-top: 50px;
text-align: center;
#stripes .loading div {
background: #fff url('spinner.gif') no-repeat 50% 50%;
border-radius: 35px;
display: inline-block;
height: 70px;
width: 70px;
#stripes .padwidth {
background: #fff !important;
color: #444;
#stripes .padwidth a {
color: #444;
#stripes .stripe_2 {
background: #5f868b;
#stripes .stripe_1 {
background: #26465b;
#stripes .stripe_0 {
background: #0d0d0f;
color: #f2ead3;
display: block;
#stripes .narrow {
width: 180px;

4. The JSON data structure should be like this:

    "class": "narrow",
    "html": [
        "<a href=\"#\" onclick=\"$('#stripes').stripes('hideFromElement', this);\">x</a></p>",
        "<hr />",
        "<p><a href=\"#\">jQuery Script</a></p>",
        "<hr />",
        "<a href=\"#\" onclick=\"$('#stripes').stripes('reloadParent', this);\">Reload parent</a></p>"

5. Call the plugin on the container you created.

$(document).ready(function() {

Change log:


  • Silly bug with full width stripes fixed. Naming conventions


  • left over css classes bug fixed

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