Просмотр поста

<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container"
                    type="button" class="navbar-toggle pull-left">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-inverse side-collapse in">
            <nav role="navigation" class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Places</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

$(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');
        });
    });

@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;
        }
    }