Hello

This is a side opening nav demonstration


Here is my script

$(document).ready(function() {   
    var sideslider = $('[data-toggle=collapse-side]');
    var sel = sideslider.attr('data-target');
    var sel2 = sideslider.attr('data-target-2');
    sideslider.click(function(event){
        $(sel).toggleClass('in');
        $(sel2).toggleClass('out');
    });
});

Here is my style

body {
    padding-top: 50px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .side-collapse-container{
        width:100%;
        position:relative;
        left:0;
        transition:left .4s;
    }
    .side-collapse-container.out{
        left:200px;
    }
    .side-collapse {
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        position:fixed;
        overflow:hidden;
        transition:width .4s;
    }
    .side-collapse.in {
        width:0;
    }
}

And my jade

header.navbar.navbar-fixed-top(role="banner").navbar-inverse
    .container
        .navbar-header
            button.navbar-toggle.pull-left(data-toggle="collapse-side",data-target=".side-collapse",data-target-2=".side-collapse-container",type="button")
                span.icon-bar
                span.icon-bar
                span.icon-bar
        .navbar-inverse.side-collapse.in
            nav(role="navigation").navbar-collapse
                ul.nav.navbar-nav
                    li
                        a(href="#Home") Home
                    li
                        a(href="#users") Users
.container.side-collapse-container
    .row
        Text you see here