Nav Bars: Your Friends and Mine

If you are planning to make a multi-page website, you are probably going to need to include a navigation bar somewhere. A website’s navigation bar works as a doorway between a site’s main pages.

You can make your navigation bar easier (and cooler) for your users to navigate by making a "navigation bar rollover" like the one above this text. If you follow this tutorial you will actually learn how to make that exact nav bar. Exciting, right? Heck yeah! Lets get started!

With a navigation bar rollover your website’s image links change when your users “rollover” them with their cursors. These images also change when they are selected, and after they’ve been selected (and your users have been redirected to a new page).

The image links in your navigation bar thus go through four different states.

So before you begin constructing your navigation bar rollover, you will need to already have four images prepared for each menu element. Because I am making a five link navigation bar, I will need 20 images (5 x 4 = 20).

These are thumbnails of the images I will be using.

Note: When creating rollover buttons like the ones in the above table all of your buttons should have the same dimensions, otherwise their varied shapes may mess up the table you'll be putting them in. A good way to vary your images is by simply varying the colors you use. For instance, notice how the first two rows of buttons have purple text, and the last two have black.