How to make a sprite navigation menu.--tutorial.jcwcn.com

“Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware.”

Sprites were used back in the Nintendo age. Developpers used them to prevent loading several images each time a character moved or entered the screen. All movements/characters were set on one big image and by using codes they could recall a section of that image. The same big image was loaded one time.

spriteset

By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image. This also prevents from slicing every single menu item.

How to use image sprites to create a CSS navigation

We do this by off-setting the background position of each list item in our nav. Let me break this down step by step. To start with you’ll need a graphic/drawing program and a text editor (logic, no?). I’m using photoshop and textpad for this.

1. First of we need our menu image. So open photoshop and create a simple rectangle with your chosen background and links. To easy the process later use one text layer instead of each link in a seperate one.

2. Now we want a hovered image underneath it, which will form our sprite image. click on ‘Image’ > ‘Canvas Size…’ (or Alt + Ctrl + C) and set the height on 200% to double up the image in height. Don’t forget to anchor the image on the top.

part2-1

part2-2

3. Select all layers (in my case 2) and duplicate them. Move them under the previous image to fill up the gap. You can also select teh layers press Alt(copy) + Shift(move straith down) and move down with your mouse.

part2

4. Now change something on your navigation (new layers), you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering.

5. Now save as menu.jpg, this is going to be the image we use for our navigation. Once you have the image saved, we can start applying HTML and CSS to get this thing working. So open up textpad or whatever texteditor you are using and make a simple unordered list that includes a different li for each of the buttons we created in photoshop.

^?[Copy to clipboard]View Code PHP

<html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
	<ul id="menu">
		<li id="home"><a href="#"><span>Home</span></a></li>
		<li id="portfolio"><a href="#"><span>Portfolio</span></a></li>
		<li id="forum"><a href="#"><span>Forum</span></a></li>
		<li id="contact"><a href="#"><span>Contact</span></a></li>
	</ul>
</body>
</html>

The reason there is a span tag is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the dont show up. Be careful because you can get flagged, by search engines, for putting different content in the hidden fields if it doesn’t match the text on the background image.

6. Now for the CSS code. i’ll explain in detail afterwards.

^?[Copy to clipboard]View Code CSS

    #menu {
    background:url("images/menu.jpg") no-repeat;
    width:350px;
    height:40px;
    margin:0;
    padding:0;
    }
 
    #menu span {
    display: none;
    }
 
    #menu li, #menu a {
    height:40px;
    display:block;
    }
 
    #menu li {
    float:left;
    list-style:none;
    display:inline;
    }
 
    #home {width: 72px;}
    #portfolio {width: 106px;}
    #forum {width: 75px;}
    #contact {width: 97px;}
 
    #home a:hover {background:url("images/menu.jpg") 0px -40px no-repeat; }
    #portfolio a:hover {background:url("images/menu.jpg") -72px -40px no-repeat; }
    #forum a:hover {background:url("images/menu.jpg") -178px -40px no-repeat; }
    #contact a:hover {background:url("images/menu.jpg") -253px -40px no-repeat; }

7. ‘#menu’: The first part of the CSS is is the sizing and background image of the nav bar. The reason the height is set on 40 px is cause we don’t want the hovering part to appear. This way only the top half of the image displays.

8. ‘#menu span’: As stated before we used the span tag for search engines to see the text. To hide this text from the menu we use ‘display: none;’

9. ‘#menu li, #menu a’: This ensure that every link is set in a block (this enables the resizing afterwards) and has a height of 40px.

10. ‘#menu li’: The ‘float:left’ is making it so each list item moves to the left side of each li below it, ‘List-style: none’ makes sure that no bullets are displayed. ‘display: inline’ is to set every link on a horizontal line.

11. ‘#link {width: **px;}’: here we set teh width of each single link.

12. ‘#link a:hover’: Here we’ll set the distance offset for when the link is hovered. For example: 0px -40px, The first number is the horizontal placement (for the first link = 0) and the second one is the vertical placement.

As the final result you get something like this:

Any questions can be posted below in the comments and I will try to answer them as clearly as possible.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

How to make a sprite navigation menu.

How to use image sprites to create a CSS navigation

relation tutorial

Category

New

Hot