Introduction

Navigation is one of the most, if not the most, important parts of a web page. Without links and navigation it would be impossible for use to get around the web and find information. This lesson covers how to build list-style navigation and image rollovers on hyperlinks.

Objectives

In this lesson students will learn to:

  • a text menu and create rollover effects manually
  • create image rollovers using CSS
  • build a list style menu using the CSS sprite technique to load images

Reading

Activities

Building a List Menu

One of the most basic and versatile ways to build a menu is to use a list of text with hyperlinks. It may seem that text and hyperlinks are all you really need, but by using a list you are able to semantically describe your menu as html.

<ul>
 <li><a href="#" title="Link title"></a></li>
 <li><a href="#" title="Link title"></a></li>
 <li><a href="#" title="Link title"></a></li>
 <li><a href="#" title="Link title"></a></li>
 </ul>

You can view how the code for the above list renders [here].

Now open up A text editor, Edge Code (or Notepad++ for PC and Text Wrangler for Mac if you prefer), and try building the list for yourself. When you’re finished, save your file as list.html. Open it up in a web browser to see what it looks like. Notice it isn’t very fancy-looking at all. CSS can help fix that.

Pseudo-classes

CSS pseudo-classes are used with some selectors to add special effects.The general syntax for using a pseudo-class looks like this:

selector:pseudo-class {property:value}

In this lesson, we will only be working with the anchor selector which has four pseudo-classes available to describe how a link appears:

a:link{color:#999999;}
 a:visited{color:#00ffff;}
 a:hover{color:#e28c03;}
 a:active{color:#77eb6e;}

Try changing the text color of the links in your list using psuedo-classes [Get the html].

Now try changing the size and background colors of the items in the list to make them appear more like buttons like [this].

** For those of you that want to try something more advanced, check out the code for this horizontal list menu. **

CSS Sprites

Back in the day, image rollovers were used to build menu navigation and utilized a combination of image slicing, html, and javascript to accomplish it. These days there are faster and more efficient ways to skin that cat.

Enter CSS sprites. Sprites allow you to combine your buttons and icons into a single image and then use CSS to move to the location of the graphic you want to use. Why is this better? Well for one, it only requires one request to the server to load the image file (since all your buttons are in the same file). Additionally, that single image with all the buttons and graphics can sometimes be a smaller file size (on disk) than the cumulative file sizes of the individual buttons and icons.

Image Swapping

Let’s get our feet wet trying the sprite technique to create a simple image swap. First let’s create a basic HTML page, then create a single button image containing 2 graphics by combining the two example images linked below, into a single files named rsssprite.png.

[rss.png]
[rss2.png]

Next we’ll build the link. This is what will make our image clickable.

<a href="#" id="sprite"> </a>

Now let’s add the CSS to move everything around:

#sprite{display:block;
 width:95px;
 height:128px;
 text-decoration:none;
 background-image:url(rsssprite.png);
 background-position: -98px -2px;}
 #sprite:hover,#sprite:active{background-position:-1px -2px;}

[See the results by following this link]

Curious to see another example? W3Schools has a video tutorial that walks through the creation of a 3-button sprite navigation:

CSS Sprite Menu

The video below is another example of a sprite menu (this one with 4 buttons). The video is quite long, but I walk through customization of all of the HTML/CSS:

Now that we’ve tried one, let’s take a look at an entire menu and see it in action. Download the following files. View the HTML file in your web browser, then open it in your text editor and study how the navigation is built:

icon-sprites.png
spritemenu.html

The video explains how to determine the X,Y coordinates for the sprite buttons you will use to create your own menu.

Looking Forward

Before moving onto the next lesson Complete Assignment 07