WEB Advent 2012 / CSS Sliding Panels

I’m here to show you how to create sliding panels using CSS and a class name toggle. Why use sliding panels on your app? Because they are awesome, that’s why. Also, because they allow users to switch between views whithout the need to load another page.

First things first

Before we go wild with “creativity,” we need a simple HTML structure to work with.

<body class="is-anchored">
    <div id="navigation">
        <p>My awesome app</p>
    </div>
    <div id="panel-main" class="panel">
        <h1>Click me to slide panel</h1>
    </div>
    <div id="panel-sidebar" class="panel">
        <h1>Click me to slide panel</h1>
    </div>
</body>

Next, we need to bind our panels (.panel) so they toggle the class name .is-anchored from the body when clicked. For that we are going to use the following jQuery snippet:

$(document).ready(function() {

    // this should be your wrapping element,
    // in this case I use the `body`
    var $body = $(document.body);
    var $panels = $('.panel');
    var dom_classname = 'is-anchored';

    $panels.on('click', function() {
        $body.toggleClass(dom_classname);
    });

});

Now for the fun part

Here is where we get crazy with our CSS. First, let’s add the rules that will be applied to .panel elements when .is-anchored is present. I’m omitting some styles in order to focus on the sliding panel layout, but I’ve supplied the complete style sheet.

body {
    /* prevents horizontal scrollbar */
    overflow-x: hidden;
}

.panel {
    /* allows each panel to have its own scrollbar, if needed */
    overflow: auto;
    /* makes the browser window the containing block */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

.is-anchored #panel-main {
    left: 0; /* moves this panels into view */
}

.is-anchored #panel-sidebar {
    left: 100%; /* moves this panel off the screen to the right */
}

Next, we add the styles for positioning the panels when .is-anchored is not present. Note that left is the only value which varies based on the presence of .is-anchored. This single property change allows us to create a smooth sliding effect using CSS transitions.

#panel-main {
    left: -100%; /* moves this panel off the screen to the left */
}

#panel-sidebar {
    left: 0; /* moves this panels into view */
}

At this point, clicking anywhere inside .panel should move the hidden div into view. It is time to add some sliding to our sliding panels with a dash of CSS transitions.

.panel {
    /* applies CSS transition to `left` property */
    -webkit-transition: left .5s ease;
    -moz-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;

    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

Slow clap

Here is the final product. I have used this technique for displaying individual assets on Gimme Bar, a magic little app that relies on infinite scroll for its pagination. Using sliding panels helped me preserve a user’s browser window position when scrolling, all without using a complex JS solution. Simple!

Other posts