如何拆分页面并揭示下面的内容？ [英] How to split page and reveal stuff underneath?

问题描述

我已经在我的iPhone应用上实现了这个功能，但是我想知道是否可以在HTML页面上使用CSS效果或类似功能。

预先感谢！

解决方案

让你开始 http://jsfiddle.net/Cquhj/

从这种模式中可以拿走一些东西：

1. middle div有一个 overflow：hidden; 属性和 height：0px 。


2. 触发器图标具有一个事件，该事件将补间中间高度 $ c $> div到你想要的大小。

编辑：

我非常喜欢给出的资源和答案我会将其添加到列表 http://wiki.forum.nokia.com /index.php/Mobile_Design_Pattern:_Acordion_Menu

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!

解决方案

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

这篇关于如何拆分页面并揭示下面的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！