使用CSS单击项目时创建iPhone样式滑出

时间:2011-08-05 01:39:47

标签: javascript jquery html css jquery-ui

我正在尝试使用CSS创建HTML样式文件夹,如果可能的话,使用非常少的JavaScript。你可以在这里找到截图。 http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/该页面上的屏幕截图显示了4个文件夹,System,Apps,Toolbox和Dev。单击应用程序会显示带有应用程序的幻灯片菜单。许多文件夹都可以实现相同的目标吗?例如,假设我有10个div向左浮动,这样4个连续排成一行,总共有3行。如果用户点击第二个div,另一个div滑出会将第二行和第三行向下推,总共创建4行?

以下是一些代码,我正在玩:http://jsfiddle.net/uAtak/

2 个答案:

答案 0 :(得分:0)

是的,这是可行的。与您引用的示例不同,当用户单击图标时,我将在display:none和:block之间切换动画。它会自动推送其他图标。

答案 1 :(得分:0)

你是说这个意思吗? http://jsfiddle.net/uAtak/5/ 只有单击div'One'才适用于此示例,但正如您所看到的那样,它非常容易扩展。