Single sprite (What's that?) navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn't it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more...
Oops: You need select a file first. Click on the browse button to get started.
Welcome to the amazing, wonderous, awesome Nav-o-Matic! Simply upload your navigation sprite below, add some guides, name some stuff and hey presto! We'll generate all the code you'll need to get your navigation working in a jiffy!
A few things to remember: There may be bugs, we've only done internal testing so bear with us. Firefox & Safari work fine. Chome does admirably. IE fails miserably.
At the moment, there are only two states; normal and hover. Hover is also the on/active state. You'll need an image with 2 rows (no vertical navigation yet either I'm afraid!) similar to this one. In the future we will add the ability to use as many as you like. Stay tuned...
Oops: You've missed out the fun bit... add some guides so we can generate your code!
Double click on your image to place a guide, double click a guide to remove it. You can even drag guides and if they're hard to see, change their colour. Don't place guides before the first item, or after the last item. Future versions will allow you to set any unwanted space like this as padding.
All done! Here is a demo of your navigation. Simply copy the CSS and HTML into your website. If you're not already in the habit of using a reset stylesheet to remove default CSS values from your various HTML elements we suggest that you start.
Something has gone wrong... Try refreshing the page and following instructions next time! :D
Did this just make certain aspects of your life easier? If so, Tweet about it!
