Use CSS and Sprite Images to Replace JavaScript for Rollover Menus

  • By: rcable
  • On: 08/07/2010 14:38:43
  • In: CSS
  • Comments: 0

I'm happy to say you can know ditch Javascript for roll over menus!

There is a new technique for designing roll over menus using CSS. 

The example below uses only CSS to create the roll over effect for the menu. Basically, you can see the full "Sprite" image displayed below the menu.  Using CSS hover you can set the background image to be offset to display the area on the "sprite image" that corresponds to the roll over area.

Rollover Menu Sprite Image

If you would like to try it for yourself...

1. Make a folder for your sample

2. Create a new text file then copy the code below and paste it in your file.

3  Save the text file and name it something like sprite.html

4. Copy the sprite image to your own folder by right clicking over the image and choose "Save As". Make sure you save it as "http://www.rickcable.com/images/blog/spritbuttons.png".

5. Open you file with your favorite web browser

The Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
 <title>CSS Sprites: Image Slicing's Kiss of Death</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style media="screen">
 
#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);}
#iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(http://www.rickcable.com/images/blog/spritbuttons.png) 0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;}
#iconmenu a:hover {border: solid 1px #000;}
#iconmenu #panel1c {left: 2px;}
#iconmenu #panel2c {left: 54px; background-position: -51px 0;}
#iconmenu #panel3c {left: 106px; background-position: -102px 0;}
#iconmenu #panel4c {left: 158px; background-position: -153px 0;}
 
#iconmenu #panel1c a:hover {background: url(http://www.rickcable.com/images/blog/spritbuttons.png) -1px -52px no-repeat;}
#iconmenu #panel2c a:hover {background: url(http://www.rickcable.com/images/blog/spritbuttons.png) -52px -52px no-repeat;}
#iconmenu #panel3c a:hover {background: url(http://www.rickcable.com/images/blog/spritbuttons.png) -103px -52px no-repeat;}
#iconmenu #panel4c a:hover {background: url(http://www.rickcable.com/images/blog/spritbuttons.png) -154px -42px no-repeat;}
 
 </style>
</head>
 
<body>
 <ul id="iconmenu">
 
  <li id="panel1c"><a href="#"></a></li>
  <li id="panel2c"><a href="#"></a></li>
  <li id="panel3c"><a href="#"></a></li>
  <li id="panel4c"><a href="#"></a></li>
 </ul>
 <div align="center">
 <img src="spritebuttons.png">
 </div>
</body>
</html>

Comments

There have been no comments made on this article. Why not be the first and add your own comment using the form below.

Leave a comment

Commenting is restricted to registered users only. Please register or login now to submit a comment.