From the lab: Nav-o-Matic

Roughly a 2 minute read from Will

14 Aug 2009

"Another labs post, only a week after the last one?" we hear you cry! We just have so many useless awesome ideas that we want to share with you, that's all!

When we build websites, we like to make them load as quick as possible. To this end, we use something called navigation matrix's. Simply put; this is when use one image with all the buttons and shift that image around for the different states. It works a treat, but it does take a while to set up. Calculating background positions, widths and heights isn't a quick process and when the client wants to change Home to Homepage after you're all finished it just makes us love them even more.

This is where the Nav-o-Matic comes in! Using some clever Javascript (and a bit of flash) you can now upload your image, lay down some guides (just like in Photoshop), click 'Apply' and you're done! The Nav-o-Matic will supply you with all the code you'll need. Just stick it in your page and you're done.

Labs link button

There are a few things to remember though before you dive in. Firstly, this is not for the rubbish browsers. If you use Firefox, Safari or Chrome you'll be fine, but anything else (Internet Explorer) and you'll struggle. There is a simple solution to that though...

Second, this is version 1. There is a lot more functionality planned, but for now, there is only support for 2 states: Normal and hover (hover also acts as the active/on state). As long as your image looks something like this though you'll do fine. Support for more states is coming soon however there is no harm in uploading your navigation anyway. It will still work out all the widths and horizontal background positions for you which is the main bit.

And lastly, no vertical navigation (yet) I'm afraid. You'll just have to do it the long way for now.

Anyway, enough reading, head over to the labs page and give it a go yourself. We'd really appreciate any feedback you have so leave us a message on the blog or Tweet about it!


Will is the UX Director at Engage. With over 10 years of industry experience, he has a vast knowledge in all aspects of front-end development and his keen eye for design, movement and interaction will bring any project to life.

Hey there old timer!

Our website uses some new fangled technology which we’re afraid your current web browser doesn’t support.

There’s loads of choice out there nowadays and it’s easy to upgrade. Just click the link below for more information!

Upgrade my browser

I.T. guy wont budge?

No problem! Give us a call on 0113 457 4090, we’re happy to help.