Neil
Carpenter

Design & front-end development

Blog

Thoughts

General thoughts on web design and front-end development - trends, frameworks, tools, APIs, tips, new techniques, old techniques, good cat videos, funny GIFs etc etc.

Proof of concept ‘stacking’ responsive menu

Read below for the context, or just view the demo here.

Stacking menu
Yes, just copying the Chrome iOS app UI.

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.

Update - I’ve now put the demo code on GitHub, so go nuts.

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…

Share this

Leave a comment...?

8 Responses to Proof of concept ‘stacking’ responsive menu

  1. 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.

    • Ah… that’s no good…

      I tested on a 2 y/o 3GS and it runs pretty smoothly so was hoping would be the same for newer Android phones, will have to try and get my hands on one and see what the problem is.

      It’s probably the JS getting/setting container height which is slowing things down, this could probably be recreated in CSS so will have to think how to do this.

      Anyway, thanks for checking it out!

  2. Pingback: Proof of concept ‘stacking’ responsive menu • Neil Carpenter | Lectures web | Scoop.it

  3. Hello, it works with no delay on my droid 2.1device… and it’s the only way I can see this effect, because chrome browser on my old phone…
    Well done

  4. It does not work in either Opera Mobile and Opera mini.
    It happens in the stock Android MIUI browser but with a 1 sec delay and no animation.

    HTC Desire.

    • Yeah as this is just a proof of concept I used translate3d() for the transforms for smoother transitions, which means I don’t think it will work on any Opera browser as they don’t support these yet.

      Could easily add a fallback for 2D-transforms which would work just fine, and I would do this if I was going to use this in production.

  5. Pingback: Matthew (Paddy) Callaghan» Blog Archive » Proof of concept ‘stacking’ responsive menu

  6. Ian Sutherland says:

    I dont see it on iPad 2 on Safari, or Chrome. falls back ok to a normal page though. nice site btw :)

Leave a Reply to Ian Sutherland Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>