Facebook Mobile Slide Menu in HTML5 + CSS3

The goals of this small project are:

• Minimal javascript
• Rely on CSS for animations
• Behave as much like the iOS implementation as possible
• Do not scroll main content area when menu is visible
• Use new iOS overflow: scroll / -webkit-overflow-scrolling: touch if possible (buggy)

Notes

The HTML and CSS are a work in progress and in no way production ready.

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.

Demo

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 (a little outdated)

You may also load this URL directly on your iPod/iPhone device or the iOS Simulator:

http://getintothis.com/fb-menu/

Recent Changes

• Enhanced swipe open and close
• re-enabled overflow-scrolling (native scroll) in menu