The Problem:
If you are a web designer who tries to combine high standard graphic design with top-notch web-standards xhtml, you can’t escape a certain degree of conflict of interests. This can be especially acute when it comes to designing a menu. You want it to have a strong graphic look, elegant and glossy, and yet you’d rather use a semantic xhtml list with text links.
Your life might get somewhat easier when it comes to headings, with various CSS Image Replacement techniques. But they’re not perfect either, and for menus you need be able to hyperlink the image.
Available Solutions
- So what can you do?
- Use CSS to format your textual menu to it’s best abilities, using the same old fonts and maybe a background image to make it look nicer. Don’t even think about using an interesting font like Arcitectura, or adding some layer effects in PhotoShop, because then you’ll have to use images.
- Employ images, which is not very semantic and requires you to add lots of additional markup, such as img and alt tags, and then you’ll need to add JavaScript calls for rollovers, and change the image of the current menu item on each page. What’s next? Design with tables…?
- Design a Flash navigation bar, which is again not very semantic, SO friendly, or accessible. I’ve nothing against Flash, in fact, I I’m a huge fan. It can be used to great effect to add an extra dimension to the website with animation and interactivity. But just like salt and pepper, you need to know when to stop adding it. Graphics or drop down menus are not a good enough reason for a Flash menu – these can always be accomplished by dhtml. A Flash navigation needs to be exceptional (or at least quite interesting) to justify itself, and even then you’ll need to add textual navigation somewhere on the page, at least for the search engines.
Most of my xhtml websites up to date have been achieved with the first method. Take a look at my own website, for example – it uses CSS and background images for formatting, and the font defaults to a generic serif. Even then, it took a lot of work and a bit of extra markup to achieve the look.
NavSwap:
My latest website project (not yet published as this goes to “print”, but soon to come) is for a glossy fashion wholesaler, and that meant top-notch graphics, even for the menu. For this I came up with option #4 – NavSwap, which happens to be the object of this article. It took some code wrangling to write, but is quite easy to implement.
You can download the script and examples here…
NavSwap serves two functions:
- Swaps semantic xhtml into images, using unobtrusive JavaScript. That is, if JavaScript is unsupported, you get an xhtml text menu, otherwise you get images, complete with alt tags generated on the fly.
- Automatically swaps images on rollovers and swaps the current menu item with an active state item on each page.