Modify existing bootstrap sidebar to collapsible

Question

I've built my project in bootstrap which has a top navigation bar and a sidebar.

Now I need to make sidebar, collapsible like this:

http://www.makerstudios.com/

But sidebar in my project is on left side of the page. How can I make this sidebar collapsible with minimum possible changes?

HTML:

<div class="col-md-3">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav">
            <ul class="nav" id="side-menu">
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

You could use a simple jquery.

First you need to set up the sidebar to be off-screen though. This can be done by adding a

.sidebar {
    left: -300px // For example
}

Then you need to make a jquery code, that listens on clicks on the button you want to be bring out the menu.

When the button is pressed, the jquery code should make the sidebar displayed again, and bring it to a visble range (left:0;)

<script>


$(function(){
    $("#menu").click(function open(){
        $('.sidebar').animate({ left: '0'}, 500);
        });//opening it
    $("#close").click(function close(){
        $('.sidebar').animate({ left: '-200px'}, 500);
    });// 'Closing it'. Takin it back off -screen within the timewindow of 500ms
    });


</script>

So what you would have to do now, is setup the bar off-screen, and then create a buttons for your opening/closing.

This solution will make the sidebar go on top of the existing body, but if you would like it do be the same way as it is on the site you've linked, you just have to add a command to the jquery to move the content-partion(visible part) the same amount as the sidebar moves.