Andrew Ingram

Generating Sprite Navigation from Fireworks

Posted on .

Using a single background image and change the positioning has long been the favourite way of developing accessible navigation menus. It gives you pre-loading of hover states for free as well as an overall reduced server overhead. The main problem with the technique is that it's rather fiddly writing all the HTML and CSS for it. SpriteNavi is a command panel for Fireworks that can generate this code directly from an image.

Note: This article was written for a previous version of the site and is likely out-of-date.

The technique of using a single image and shifting its position depending on the menu item and state has been my favourite method of creating graphical navigation menus ever since I first heard about it. Overall file sizes tend to be smaller and in general the approach is more accessible. The main drawback is that writing the HTML and CSS can be quite time-consuming since it requires calculating the offsets and dimensions of every state of the menu.

SpriteNavi is a Fireworks command panel I've developed to help automate this process. I've chosen Fireworks for the initial development because it's much easier to develop for than Photoshop and much more of the application is accessible to scripting. As it stands SpriteNavi can only develop horizontal navigation bars, the main issue with adding vertical menu support is how to do the user interface rather than any coding problems so hopefully this will be coming soon.

It works by using guides in your document to work out the dimensions of the menu items. So if you don't already use guides you'll have to add them to use SpriteNavi, guides at 0 and the image dimensions are optional.

Simply download the .swf file and place it in your "Fireworks\Configuration\Command Panels" folder, load Fireworks and SpriteNavi will be selectable from the Window menu. You can then choose to float it or have it docked in the toolbar

Press "Fetch Guide Data" to populate the datagrid. you can then change the name of the menu and the menu items as well a prefix to be added to the name of each menu item to avoid conflicts with any other ids in your HTML. Use the spinners to select which row should represent each of the 5 states of the menu items (I personally tend to group link and visited on the first row, focus and hover on the second and active on the third). Then press "Generate Code" to output the HTML and CSS in the textarea below. You can then copy this code into your own HTML and CSS files. You can change the numerical values if you like but it's not recommended if your document guides are correct.

Screenshot of SpriteNavi embedded in Fireworks

Download SpriteNavi for Fireworks (right-click and save link as, otherwise the swf will just load in your browser)