News Archive
PhpRiot Newsletter
Your Email Address:

More information

CSS Sliding Panels

Note: This article was originally published at Planet PHP on 22 December 2012.
Planet PHP

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 aocreativity,a we need a simple html structure to work with.

My awesome app

Click me to slide panel

Click me to slide panel

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!