iPhone like folder opened design on the web

Question

This is a bit tough, and I would love some help with this. I have researched forever and cannot find a way to do so, nor know how to write it. I am looking to create an iPhone folder-like design for the web. The design is like this:

For those of you who have iDevices, I want that "slide out" effect when you click on the folder as well.

For those of you who do not have iPhones/ipads/itouch (I dont know how you live with yourself first off!) but its a nice flowing opening menu when you click on it.

When you click the "login" button I want it to look like an the opening of the iphone folder, and kind of "split" the page in half like the iDevices do.

I'd love help writing this to work, as I'm sure a ton of people would benefit from it as well. It doesn't have to be exact, I just want the underlying animation. I can write everything else myself. Everything you need should be on that site if you view the source.

Click "Browse all Features" on:

http://www.apple.com/ipodtouch/features/

Thats exactly what I want.

Thanks for all your help everyone!

Answer 1

May I point you to a question I already asked a while ago about the same thing? See the question here: How to split page and reveal stuff underneath?

Specifically take a look at Jimmy Chandra's awesome code snippet: http://jsfiddle.net/hKHWL/

It wouldn't be too hard to modify this line:

.folder { background-color:#0df }

to have the folder background you're trying to make.