Proof of concept ‘stacking’ responsive menu
Read below for the context, or just view the demo here.

I read a lengthy thread/discussion on Google+ the other day about the state of the web applications, specifically in relation to native apps on mobile devices. I had always taken it as a given that the open web would prevail over proprietary and device-specific technologies, and that it was just a matter of time before the web catches up, but this article kind of worried me, with plenty of well-respected members of the web community voicing concern of the lack of urgency in implementing features to bring the web on a par with native applications, and that in fact it may never catch up.
Anyway, this made me sad. I understand that there are technical limitations with certain device APIs not yet available to browsers, and certain features lacking the ubiquity or ease-of-use to make web-based applications viable, such as an efficient offline-storage implementation, but I still think with regard to UI there really isn’t anything stopping web-based solutions being on a par with native implementations. When I say this, I’m really talking about responsive design as opposed to web technologies in a downloadable native wrapper. I have said before that there is a lack of full-featured, dynamic, responsive sites and we haven’t really seen RWD achieve anything close to it’s potential.
Demo it or it didn’t happen
So, I wanted to see how easy it would be to recreate a native app interaction – specifically the ‘browser tab’ menu from Chrome for iOS. I like the Chrome app, it has a slick interface with nice transitions and makes the most of a gesture-based OS.
Turns out it wasn’t too tough – I put this together in an evening, with some rushed/lazy/bad UI touches in an attempt to make it look more refined. This is mostly just CSS transform/transitions, with very little javascript. It uses jQuery but that is just being lazy on my part, could very easily be rewritten without.
This isn’t really a ‘navigation’ pattern, but this is the kind of thing I think would work well on smaller sites, or on single page apps with perhaps a small number of top-level pages. The tab/section switching could be hooked up to some AJAX to create a more native app-y feel. Needs some pushState, history management as well, but it is just a DEMO! Anyway, pretty happy how it turned out for such little work, could easily see myself using this in a project in the future.
Note – “Demo it or it didn’t happen” is from the footer of CodePen, not sure if that’s where it was originally from though…
Nice job, looks really nice!
It does work in Android Jellybean Chrome but there is quite a noticeable delay of 2-3 seconds inbetween the article being fully zoomed out and the other articles displaying.