Words and Pictures

Super Responsive Multi Level Navigation!

by HTML CSS jQuery RWD

Never fear, an adaptive jQuizzle remedy is here.

Back in November 2012, I found myself in a bit of a sticky situation.

Many in-house agency developers will no doubt relate to this issue. A client has changed his mind, and actually, now he DOES want the site to be responsive on tablets and smartphones.

Thats easy, you built it on a framework right? No. I did not. I'm a bit stubborn when it comes to frameworks.

Well, most of us are using a bit of a framework these days, it just happens that I don't shout about my very own custom boiler plate. It's plain and simple, and removes all the guff. I understand it, it's mine and I can deler work extremel quickly wih it.

Back to my story.

To summarise the situation so far... I had completed a rather large website I'd been working on for a couple of months. The day before launch the client decides it needs to be responsive, working on tablets and smartphones, even though he hasn't agreed to pay for that kind of development, and I was given strict instructions not to.

I had been one week to sort it out.

I can read your mind. You're thinking "not really a big deal, just chuck a few media queries in there and bung it all in a single tower of meh" - you think correctly, this is what I did. However, the real problem I faced was a multi tiered navigation system.

The culprit was a base of multi layered hover driven data, inside a horizontal bar, activated purely by CSS, five levels at the deepest - something which will never work well on touchscreen devices, and has potential to become very ugly on 320px.

For some reason, it's only in the last 12 months that smartphone navigation solutions have been appearing everywhere, which is great now, but not 12 months ago. It makes me think many other developers found themselves in the same spot as me.

My pursuit to do a job and do it right pushed me to the edge of desperation, as usual, but one frosty morning in Elephant and Castle roughly one week later, while stirring my morning coffee in a nearby Wetherspoon establishment, I found myself staring contently at a digital masterpiece.

That is to say, I worked it out. All thanks to two things: jquery.clone and hardware acceleration.

I was so amazed by my own awesomeness, I waited a year to build up the courage to show a few people.

So here it is (in a very basic format - yet to be tidied up, but nevertheless still amazing).

View Demo Download

Related Articles

PS Network