Create iPhone style slide out when clickin on an item using CSS
I am trying to create iPhone style folders in HTML using CSS with very little JavaScript if possible. You can find the screenshot here. http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/ Screenshot on that page shows 4 folders, System, Apps, Toolbox, and Dev. Clicking on Apps shows a slide out menu with apps. Is the same achievable with many folders? For example, say I have 10 divs floated left so that 4 fit in a row, giving me total of 3 rows. If a user clicks on the 2nd div, another div slides out pushes the 2nd and 3rd row开发者_如何学JAVA down, creating a total of 4 rows?
Here is some code, I was playing with: http://jsfiddle.net/uAtak/.
Yes, it is doable. Unlike the example you referred, I would toggle between display :none and :block with animation when user clicks an icon. It will automatically push the other icons.
You mean like this? http://jsfiddle.net/uAtak/5/ Only clicking on div 'One' works for this example, but as you can see it's pretty easy to extend.
精彩评论