October 26th, 2010 - by Golgotha

In this article we are going to look at some very common mistakes that are made when building a navigational menu. We will then look at how to rebuild it making it better, faster and stronger. Okay, maybe not stronger, but certainly better, faster, lighter, more search-engine friendly and all around less sucky…

The navigational menu that we are going to rebuild is the one for the Rock Bottom Brewery restaurant that we love here in Denver.

Have a look at their main menu. It’s the one with: Home, Find A Restaurant, Menu, Beer & Spirits and Contact Us. You might be thinking, “What? Works just fine.” Yes is does, but why settle for “just fine” when we can make it better?

Now look at our Re-factored main menu. Once again, at first glance both menus work and look reasonable, but stick around and let’s see what makes the re-factored menu better.

Sprites

The original Rock Bottom Brewery (RBB) menu uses an image for each and every menu item. It then uses another image for the hover state. That’s ten total images just for the main menu; even more for the sub-menus. That means on-page-load they went to the server ten times just for the main menu.

If we use a tool like Firebug we can see that they actually went to the server a whopping 81 times (see screenshot). Gulp! That’s not acceptable in my book and it certainly is not necessary. Every time you make a web request to the server that’s a performance hit.

If we use a tried-and-true technique that Dave Shae taught us way back in 2004 called sprites we can reduce our entire navigation, main and sub, into one image and gain significant advantages. The first advantage is obvious, the less trips we take to the server the better. In addition to greater performance we gain two more nice benefits:

1. The cumulative file size of all their images will be greater than our single image. That’s because for each image it has to store off all the colors used. So if you have 5 buttons that use the color green then you have to save green 5 times. In a single image, that’s right, we save green one time. This can add up quickly when you’re using gradients.

2. If you were to clear your cache and revisit the RBB website, then mouse-over one of the main menu links you might notice a delay as the menu is loading up the hover image. When you use a single image for both hover and default state there is no delay because you already have the image. Do not miss the significance of this. It’s a huge benefit to a UI. Anyone that calls themselves a UI person needs to understand this.

Okay, so we now know there are great benefits to using sprites, let’s talk about how it’s done.

Here’s my image sprite for the navigation.

Yep, that’s it.

We can then use some CSS background positioning with height and width properties to only show the portion of the button needed for each state.

  1. background:url(nav-sprite.png) no-repeat right -55px;/* over state of image*/
  2. background:url(nav-sprite.png) no-repeat right top;/* normal state of image*/

See what’s going on? We bring the image up -55px for the over state. An easy little trick with a big pay off. Sprites are a must technique for any UI developer.

Check out these sprites by: Google, Apple and Amazon.

You can read more here:

  • http://www.alistapart.com/articles/sprites/
  • http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Sliding Doors

Like sprites, sliding doors is nothing new as a technique, but it’s one that must be understood and mastered by the front-end web developer.

I’m not going to go into detail here on sliding-doors, it’s been covered well elsewhere, but the bottom line is that if we structure our images correctly and use some CSS code we can create dynamic sized navigation tabs, amongst other things.

For more info on sliding doors read these articles:

  • http://www.alistapart.com/articles/slidingdoors/
  • http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Using @font-face to embed fonts

The Rock Bottom Brewery menu is guilty of another far too common mistake: placing the text in the image. Adding text to an image is something that should not be used that often and almost never be used in a menu link. Here’s why:

1. Search engines can’t read images, they’re just blobs to a search engine, so your text goes unnoticed. That’s just bad SEO.
2. Screen readers for the visually impaired can’t read images either. So that’s just rude. Sure you can use ALT properties, but it doesn’t carry the same Lose Weight Exercise as text does.
3. Font size adjustment – hold down the ctrl-key and move the scroll-wheel on your mouse up. Now view the RBB menu and the re-factored menu. If you do this on the RBB menu the text becomes pixelated. On the re-factored menu, it remains crisp and clear.

Here’s the good news! We now have the ability to embed fonts on our pages so we can still use those fancy fonts AND yet please the search engines and screen readers.

Check out my fun with fonts Halloween example. Did you notice that you can select the text with your mouse and cut/copy and paste it?

Have a look at the CSS:

  1. @font-face {
  2.     font-family: 'MatchbookMatchbook';
  3.     src: url('fonts/Matchbook-fontfacekit/Matchbook-webfont.eot');
  4.     src: local('☺'), url('fonts/Matchbook-fontfacekit/Matchbook-webfont.woff') format('woff'), url('fonts/Matchbook-fontfacekit/Matchbook-webfont.ttf') format('truetype'), url('fonts/Matchbook-fontfacekit/Matchbook-webfont.svg#webfont') format('svg');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }
  8.        
  9. h1.MatchbookMatchbook {font:60px/68px 'MatchbookMatchbook', Arial, sans-serif; letter-spacing: 0;}
  10. .MatchbookMatchbook a {
  11.     font:32px 'MatchbookMatchbook', Arial, sans-serif;
  12.     color:#E1E1E1;
  13.     text-transform: uppercase;
  14.     text-shadow:1px 1px #000; /*Works in Safari 3+, Opera 9.5, Firefox 3.1, Konqueror */
  15. }

I simply embed the font called ‘MatchbookMatchbook’ and then reference it in my links.

You can find many free embeddable fonts at the Font Squirrel.

You can read more about embedding fonts here:

  • http://soyrex.com/articles/tutorial-using-font-face-to-embed-fonts.html

CSS3 Spiffiness

So now that we have our font embedded let’s use some more CSS to fancify it.

Using the CSS3 property text-shadow we can give our text a nice drop-shadow.

  1. text-shadow:1px 1px #000; /*Works in Safari 3+, Opera 9.5, Firefox 3.1, Konqueror */

This property works in most modern browsers. If it’s not supported in an older browser, no problem, the text is still there, just no drop-shadow. We can live with that.

Just for fun, try this:

  1. text-shadow:0 1px 20px rgba(255, 255, 255, 0.5);

That one creates a glow-like effect to your text.

Conclusion

This article has reintroduced us to a handful of oldie-but-goodie techniques that seem to have been skipped by a generation of developers. I guess all this grey hair is good for something.

11 Responses to “Building a Better, Faster, Stronger Navigation Menu”

1 Paul OB

Hi Mark,

Nice to see you writing again.:)

Good summary on the menu techniques.

2 Golgotha

Thanks Paul, now we just need to get you back in the saddle, wink wink.

3 yosh

Thanks for summing up all the technics.
If I may, I’d like to add that you can skip the :hover state’s background image altogether and create the gradient with css3-gradient.

That way you still have one image, but it’s smaller and lighter.

4 Golgotha

Good point Yosh, you could certainly do that. I have an example that’s an accordion menu that uses a lot of CSS3 gradients here: http://www.search-this.com/examples/accordion/

5 crusher machine

very helpful!

6 deterjan

Great job on your writing! Love it much that I can’t really resist to read every word! Thanks!

7 Jacob

Previously I was trying to figure out how some sites had there side navigation and menu navigation do this using a single image.

I was amazed to see that its really that easy to do and will definitely use this on my next site.

8 IT Rush

Wow, that’s an awesome work.. I really hope to build one like that too. Thanks for sharing the techniques.

9 mutuelle

Thanks for this great tutorial ! I was searching for one for my new blog ;)

10 Slots

Its a good tutorial its nice to have a post that is helpful to upcoming web designers..

11 Alexis

This seems much more efficient than what many other sites do. Usually they have 2 different images and then call upon the other in hover.

Having one image like this is much easier.

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading


    Warning: fopen(./wp-content/themes/big-blue/my_blogroll.php): failed to open stream: Permission denied in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 5

    Warning: fread() expects parameter 1 to be resource, boolean given in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 6

    Warning: fclose() expects parameter 1 to be resource, boolean given in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 7
  • Smashing Magazine