Double Push Side Panels

Example of having push panels on either side of the content. Panels only open far enough to leave the open/close button visible.

HTML

<div id='container'>
    <div id='menu' class='panel sub_panel'></div>
    <div id='sidebar' class='panel sub_panel'></div>
    <div id='content' class='panel'>
        <div id='header'>
            <button id='menu_btn'></button>
            <button id='sidebar_btn'></button>
        </div>
    </div>
</div>

CSS

body, html { height: 100%; margin: 0; padding: 0; width: 100%; }
button { height: 40px; width: 40px; }
#sidebar_btn { float: right; }
#container {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#menu {
    background-color: black;
}
#sidebar {
    background-color: gray;
}
#content {
    background-color: white;
    z-index: 10;
}
.panel {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.5s;
    width: 100%;
}
.panel_right {
    transform: translate3d(calc(50% - 40px), 0, 0);
}
.panel_left {
    transform: translate3d(calc((100% - 40px) * -1), 0, 0);
}
.panel_active {
    z-index: 5;
}
#header { background-color: black; }

JavaScript

var $menuBtn = $('#menu_btn');
var $sidebarBtn = $('#sidebar_btn');
var $menu = $('#menu');
var $sidebar = $('#sidebar');
var $content = $('#content');
var $subPanels = $('.sub_panel');

$menuBtn.on('click', function () {
    $content.toggleClass('panel_right');
    $subPanels.removeClass('panel_active');
    $menu.addClass('panel_active');
});
$sidebarBtn.on('click', function () {
    $content.toggleClass('panel_left');
    $subPanels.removeClass('panel_active');
    $sidebar.addClass('panel_active');
});