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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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> 
</div>

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>",
        "<p>etc.</p>",
        "<hr />",
        "<a href=\"#\" onclick=\"$('#stripes').stripes('reloadParent', this);\">Reload parent</a></p>"
    ]
}

5. Call the plugin on the container you created.

<script>
$(document).ready(function() {
$('#stripes').stripes();
});
</script>

Change log:

2014-04-14

• Silly bug with full width stripes fixed. Naming conventions

2014-04-10

• 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.