rocknbil - 5:08 pm on Sep 19, 2011 (gmt 0)

Welcome aboard PlantoSell, this is actually pretty easy. :-) This is one permutation of CSS sprites.

To start off, anchors (a) are inline by default. We change their display to block so they will react to width and height.

Our plan is to use one image for each menu*, and change the background-position on hover. So we start making each image twice the height you need it, and it has to be exact. So if logo.jpg is 30 X 20 pixels, we create an image in the graphics program at 30 X 40 pixels, with the "normal" state in the top half . . .

NORMAL
------
MOUSEOVER

This will display through a 30 X 20 "window" showing only the top half.

Next, we need a way to "target" each menu item, and this is done by setting ID's on the anchors themselves. It's important to remember -ID's **must** be unique within a page. You can't have two ID's of the same value.

Also, I always like to recommend semantic HTML. A menu is, of course, a list of links . . . we'll add more CSS to make a horizontal menu out of that (if you need one.)

<ul id="top-nav">
<li><a id="menu_1" href="menu1.pdf">Menu1</a></li>
<li><a id="menu_2" href="menu2.pdf">Menu2</a></li>
</ul>

All that's left is the CSS.

/* This part is as I mentioned - just to make a horizontal nav
The UL width will be the sum of your image-based navs
plus any paddings or margins */
#top-nav { width:82px; padding:0; margin:0 auto; }
#top-nav li { float:left; list-style:none; margin:0; padding-left: 8px; }

/* the display: block property allows us to use BG images for the anchors.
We use the text-indent property to allow "plain text" links for SE's
while using image-based menus for users. The text-indent sets the text
"off the page." In this scenario, menu_1 is 30 px wide, menu_2 is 40px wide,
so 30 + 8 + 40 + 8 = 82 - but the height, background attributes, and others
are common. */

#top-nav li a {
display: block;
height: 20px;
text-indent:-50000px;
text-decoration: none;
outline: none;
background-position: top left;
background-repeat: no-repeat;
}

/* mouseover magic */
#top-nav li a:hover { background-position: bottom left; }
/* and here we go, the meat of the sprites */
#menu_1 { width: 30px; background-image: url(../images/menu_1.png); }
#menu_2 { width: 40px; background-image: url(../images/menu_2.png); }

That's pretty much the basics . . . have fun. :-)

*A more robust method is to use a single image for ALL of the menus and position them with pixel values in each "container." This has the advantage of loading only a single image on page load.