I built this demo after reading Luke Wroblewski's Multi-Device Layout Patterns post. If you remember Twitter's old iPad app or have used Path's iPhone app, you've swiped panels back and forth as a means of navigation. Top panels reveal lower panels and so on. This pattern is a twist on the flattened navigation pattern seen in the iOS weather and stock apps. But instead of moving laterally across panels, we're sliding panels off the top much like dealing a deck of cards.
I call this a "hybrid" pattern because it's meant to function as a stack on touch devices and as flattened navigation on desktop. Why not use a stack pattern on desktop? Because it does not translate well to mouse input. Imagine shuffling a deck of cards with stick. Kind of awkward right? It's equally as awkward trying to click, drag and toss panels around your screen... it just doesn't feel right.
> 1000px breakpoint: All elements are on screen.
> 480px breakpoint: Contact panel hides off screen.
> 480px breakpoint: Clicking contact navigation slides contact panel on screen and slides menu and navigation bar off screen.
<= 480px breakpoint: Both navigation option appear while both panels hide off screen.
<= 480px breakpoint: Clicking navigation slides the associated panel on screen and slides everything else off screen.
If you've made it this far and haven't resized your browser or rotated your phone... give it a shot! Please also review details on the desktop experience.