What is it?

Following on from this, another go at creating a new navigation, UI-interaction for responsive sites.

This is recreating a transition which is seen quite commonly in iOS apps at least, the page flip to reveal hidden content behind. In the example it is just the site navigation which at full size would occupy the header, but it could just as easily be used for an AJAXified site to load in supplementary content or create a new page transition effect a la jQuery mobile.

The effect does depend on CSS 3D transforms and transitions, so if this were to be used in production it would have to be used to modernizr (or similar) to test and polyfill where appropriate, although looking at caniuse.com the support on mobile devices isn’t that bad, with the exception of Opera, and testing it here it runs pretty smooth on a 2 year old 3GS which is think is pretty acceptable.

The demo is basically formed of three elements: a header bar with branding and mobile menu button, a front-facing content area (main content) and a back-facing content area (navigation). The latter is actually facing forwards when above a certain screen width, and positioned absolutely to appear as if the navigation links are part of the header, which they aren’t really.

When the menu button is clicked, the “front” and “back” are reversed with a CSS transition-animation combo. This isn’t a new CSS technique at all, but can’t recall seeing it being used in this way before so thought may as well…