Archive for January, 2007

Sprite Menu

January 19th, 2007 by SubZane

When the simple list menus with text links aren't enough and you wish to have all your tabs/buttons as beautiful (or in this case ugly) images it can be tricky to enslave the standard UL list to solve your problem. It's all very possible though, and with only using one image for the full menu, no more need to save 1 or even 2 images for each button, because now we are working with sprites!

In this demo I'm using a very simple and ugly menu (to lazy to make it beautiful but it still is very valid) and as you can see it's two rows. The top row is the normal view and the bottom row is the hover, or onmouseover view.

Compability

I've not been able to test in every single browser so if you are a mac user, feedback would be most helpful :)

Windows

  • IE7 - Works 100%
  • IE6 - Works 100%
  • IE 5.5 - Untested
  • Firefox 2.0 - Works 100%
  • Opera 9 - Works 100%
  • Safari 3 - Works 100%

Mac

  • IE 5.5 - Untested
  • Safari 3 - Works 100%
  • Firefox 2.0 - Works 100%

Plain and simple

Without any styling what so ever the menu is very straight forward and easy to use. Click here to view the menu without any style. And as you can see below the source isn't that tricky to understand either.

Show as plain text
HTML:
  1. <div id="spritemenu">
  2.   <ul>
  3.     <li class="buttonA"><a href="#"><span>Home</span></a></li>
  4.     <li class="buttonB"><a href="#"><span>About</span></a></li>
  5.     <li class="buttonC"><a href="#"><span>Contact</span></a></li>
  6.     <li class="buttonD"><a href="#"><span>Forum</span></a></li>
  7.     <li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
  8.   </ul>
  9. </div>

Applying style

With the CSS added it transforms the simple UL list to a graphic menu. View here. As you can see most of it is fairly basic.

Show as plain text
CSS:
  1. div#spritemenu {
  2.   height: 50px;
  3.   width: 400px;
  4.   font-size: 9px;
  5.   background-image: url(menu.gif);
  6.   overflow: hidden;
  7. }
  8.    
  9. div#spritemenu ul li {
  10.   display: inline;
  11.   margin: 0px;
  12.   padding: 0px;
  13. }
  14.    
  15. div#spritemenu ul li a {
  16.   display: block;
  17.   position:relative;
  18.   height: 50px;
  19. }
  20.    
  21. div#spritemenu ul li a:hover {
  22.   background-image: url(menu.gif);
  23. }
  24.    
  25. div#spritemenu ul {
  26.   margin: 0px;
  27.   padding: 0px;
  28.   list-style-type:none;
  29.   height: 50px;
  30. }
  31.    
  32. div#spritemenu span {
  33.   display: none;
  34. }
  35.    
  36. div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
  37. div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
  38. div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
  39. div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
  40. div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
  41.    
  42. div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
  43. div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
  44. div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
  45. div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
  46. div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}

The interesting and tricky part is the last part, this is where I set the coordinates for each button. I need to set the width, top, left of the A element and the background position of the image so that each A element displayes the correct background.

Show as plain text
CSS:
  1. div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
  2. div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
  3. div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
  4. div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
  5. div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}

In the hover part it's fairly the same, I need to set the position of the background image to display the correct background when I point at the A element. In both of the cases, hover and non-hover you are free to set what coordinates you wish. So you could have the same hover image for all A elements if you wish, you could also design the menu image in what ever way you want.

Show as plain text
CSS:
  1. div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
  2. div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
  3. div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
  4. div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
  5. div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}

Summary

As it's every designers dream to use whatever font/image in the menu that he/she wants this is a very good solution that gives all the benefits of a designed menu and at the same time doesn't affect usability or semantics in bad way.

View Demo

Posted in CSS/HTML | No Comments