How to split page and reveal stuff underneath?

问题

I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.

As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)

Thanks in advance!

回答1:

Here's an example to get you started http://jsfiddle.net/Cquhj/

A few things to take away from this pattern:

1. The middle div has an overflow: hidden; property and height: 0px.
2. The trigger icon has an event that tweens the height of the middle div to the size you want.

Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

回答2:

here an update, more iphone-like

http://jsfiddle.net/mFeyn/1/

it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.

回答3:

Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.

As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.

If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.

Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column

回答4:

Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.

The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.

http://jsfiddle.net/hKHWL/

回答5:

This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)

I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/

If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.

Good luck.

回答6:

I know this is an old post/question... but I'm doing this with dynamic heights and positions here:

http://webkit-os.pixelass.com/iframe/ (only works in Chrome and Safari) I am using jQuery and two divs with the same image. Dynamic positions means.. you can move the folder to a different position or page. Dynamic height means... the height is relative to the number of Icon-rows in the folder.

The folder even opens above and below if the content is too hight to be displayed below. (opening the folder from the Dock does not work yet)

来源：https://stackoverflow.com/questions/4632159/how-to-split-page-and-reveal-stuff-underneath