CSS3 Pullout Menu

This demo is for a folding pull-out menu that uses CSS3 elements and JavaScript only. It uses no images or flash to produce the effect although they could be used to enhance the natural feel.

Space carousel

View Demo

The Idea

I’ve seen this effect used before but most recently in a tech demo for Microsoft’s “Courier”. Below is a snippet of how this menu system works:
Pullout Menu Design
My Idea was to build this using DHTML only. No Flash, Canvas or SVG but pure HTML, CSS and JavaScript.

The Basis

The Pullout menu comprises of five HTML elements a,b,c,d and a handle. Elements a,b,c,d are positioned and then skewed to give the effect of a folding object.
folding object
When the handle is pulled outwards the width of the elements is stretched and the skew becomes less. This and some colouring effects in JavaScript give the effect of a fold.

Final Effects

I added a simple “on complete” event that detects when the menu is fully opened. The event can be used to trigger any JavaScript you like. I also tinkered with a revert animation that was triggered if the menu was released without being fully open, although this was cool it made it impossible to view the code frame-by-frame in firebug.

Folding Improvements

The animation I used doesn’t seem natural to me, this was down to my lack of understanding in perspective drawings and transitions. Im sure someone with a better understanding could make a much better example from this concept. Maybe if images, gradients and shadows were introduced the effect would start to feel more natural.

Finally

If anyone does improve the menu could you let me know. I’d be really interested to see it.

6 thoughts on “CSS3 Pullout Menu”

  1. This is a useful when creating ui elements for large touchscreen devices like the Apple iPad

  2. This is really cool. It’s crazy what is possible with CSS3. I still have no use for this, but will for sure bookmark. Great job.

  3. Hi, here is a very cool CSS3 playground 😉
    About a more natural effect you’d like : in fact your pull menu is like a door hinge at the very left on vertical. So this vertical left height should be always the same…and the very right vertical might be the same too if u consider there are on the same z…so you *just* have to adjust better the height of yours objects so the left and right verticals stay same along. At start the middle vertical has a height a lot bigger as its z is more closer, and then become same as left height as their z becomes identical. Don’t know if I am quite clear :S

Leave a Reply

Your email address will not be published. Required fields are marked *