The goals of this small project are:
- Minimal javascript
- Rely on CSS for animations
- Behave as much like the iOS implementation as possible
- Fixed search header in menu
- Do not scroll main content area when menu is visible
- Use new iOS overflow: scroll / -webkit-overflow-scrolling: touch if possible (buggy)
The HTML and CSS are a work in progress and in no way production ready. My initial goal was simply to get the page to resemble the current Facebook web site.
I have inlined most of the images using data-uri's so that I could work on this offline. All images/icons used belong to Facebook and I am simply using them for educational purposes.
You can watch a quick Youtube video I put together of how this works in the iOS simulator.
http://www.youtube.com/watch?v=uCFY0DF2UZo
You may also load this URL directly on your iPod/iPhone device or simulator: