Share it:

This is the simplest way to create sidebar slide panel for bootstrap with HTML/CSS and a few lines of JQuery.
Follow the steps to a create slide panel in 5 minutes.

Add following Libraries and file paths to head section of the page:

bootstrap.min.css
jquery.min.js
bootstrap.min.js

Lets create HTML for slide panel and content section of the page.

Slide Panel

<div id="slide-panel">
<a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
Panel Content
</div>

Content Section

For content section i am using standard dummy text (filler text) i.e. Lorem lipsum

<article id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>

CSS for styling the slide panel and content area

body
{
    overflow: hidden;
}
#slide-panel {
    width:300px;
    height:800px;
    padding:10px;
    background:#eee;
    margin-left:-300px;
    float: left;
    max-width: 300px;
}
#opener {
    float:right;
    margin:-10px -50px 0px 0px;
    border-radius:0;
}
#content
{
    height: 500px;
    width: 100%;
    float: left;
padding-left: 5%;
}

JQuery

Add JQuery for hide, show and animating the slide panel.

$(document).ready(function(){
    $('#opener').on('click', function() {	
    var panel = $('#slide-panel');
    if (panel.hasClass("visible")) {
       panel.removeClass('visible').animate({'margin-left':'-300px'});
       $('#content').css({'margin-right':'0px'});
    } else {panel.addClass('visible').animate({'margin-left':'0px'});
       $('#content').css({'margin-right':'-300px'});
    }	
      return false;	
    });
});

GITHUB Repository

Complete source of the plugin available for downloading on github. Feel free to download and contribute on github repository.

  • Jhonny

    do you have a twitter that i can follow