CSS Navigation Types

Any type of dynamic web site that is seen online has some sort of interactive navigation system.  Whether it is graphics, text, Flash, Swish, JavaScript, or CGI based, these main links can be an intigral part to any web design.  For this tutorial we will look at a few of the various types of CSS-based navigation; plain text, colored backgrounds, and image backgounds.

Plain Text Links

Text links can be handy in many ways.  Not only can they be edited rather easily and quickly (i.e. a simple .INC file if you are using PHP or ASP), but they also work well with software designed for handicapped or visually impared viewers.  A good, clean text navigation should be a bold-faced, sans-serrif font with no type of text decoration added to it unless the design of your site calls for the font to be italicized.  You should also look at the color of your font.  For this particular example we are going to use black font on a white background with a medium-dark shade of blue for the link color.

We’ll start by defining our links in the CSS file by using the a.Navlink command and setting our variables inside the brackets. Look at my example to the right. I have set the text-decoration line to “none” to remove any automatic underlining to the link. I have also created this code as a class of a link named “Navlink”. This will allow me to later go in and define exactly what links I want to be my navigation. I have also included the multiple commands a.Navlink:visited and a.Navlink:active to define active and visited links to be the same setting as the original link. In the second section of code, a.Navlink:hover, I define the settings for when a viewer holds their pointer over one of my navigation links. For this instance, I change the color and text-decoration to make the link pop out more and show the viewer that it is a clickable link.

a.Navlink, a.Navlink:visited, a.Navlink:active { font-family: Arial; font-size: 11px; font-weight: bold; color: #073294; text-decoration: none; } a.Navlink:hover { color: #333; text-decoration: underline; }

Using Colored Backgrounds

Adding some color to your links can be helpful to determine what navigation links are the main links to your page, and which ones are sub-navigation links.  Using CSS code, you can quickly and easily identify each class of the link you wish to have as well as change the color surrounding the text for your link.

We’ll use the same code as before and develop it more to fit our needs.  I’ve left the color and the size of the font the same, but added a background color behind it, some padding around the font to make the links bigger, and using the display: inline-block; command, I box the link into a block that can be placed horizontally (or display: block; for vertical links) on your page.  For this example I gave the links a light green background to allow the viewer to see the blue font easier. When the visitor moves their mouse over any part of the colored box, it will act as the link, giving your site the illusion of a colored table or mouse-over button that is controlled by JavaScript, without the confusion of writting all that Java code. In the second portion, the a.Navlink:hover section, all I changed was the color of the font and the color of the background.  I did not apply any text decorations (such as underlines) because the change in color of the box surrounding the font will tell your viewer that they are over an active link.

a.Navlink, a.Navlink:visited, a.Navlink:active { font-family: Arial; font-size: 11px; font-weight: bold; color: #073294; text-decoration: none; display: inline-block; background-color: #82A671; padding: 5px; } a.Navlink:hover { color: #333; background-color: #B3D694; }

You can use the same idea for having a transparent link and changing the color of a border.  Instead of including the background-color code, use border: [insert border color, type, and width].  In your a.Navlink:hover class you will just change the color of your border.

Using Background Images

CSS makes it very easy to change the background image of a navigation link without having to write all that complicated and confusing JavaScript code.  Similar to how we define the text and background color in the regular link and hover link (mouseover), we define different images using the background-image command.

There are some limitations, however, to using this style of navigation links.  The biggest one is that images take time to load and will not change instantly until the viewer has the image stored in their brower’s cache.  If the viewer has image caching turned off, your links will never change instantly.  For this example we are going to get around this problem by using a multi-layer image.

A multi-layer image is a set dimension image with different layers for each style of navigation button you wish to you have (one for standard button, one for mouseovers, and one for when you click on it).  All these layers are included in one image.  For this example, our image is 170px wide by 60px tall and is divided into three 20px tall sections for each of our different stages of activation.

This time we will add the background-image code to determine the link to the image we want to use, display:block; to display the links in a vertical fashion, set the width and height to match that of our image sections, and use the background-position code to determine the vertical position of our image in relation to the top of the text. In a.Navlink:hover class you redefine the image link, then change the vertical position of the image so the top of the next section is in line with the top of the text by subtraction 20px from the image’s original position.  In the background-position: section the first value determine’s the horizontal position, and the second value determine’s the vertial position.  Change the second value to -20px. Finally you want to add a bit more class to your page?  How about changing the image when a user clicks on the link.  This is the a.Navlink:active class.  For this example we change the vertical position of the image another 20px from the hover state; so subtract 40 from the image’s original position like I have in the final section of the example to the right.

a.Navlink, a.Navlink:visited, a.Navlink:active { font-family: Arial; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; display: block; background-image: url(nav_body.png); width: 170px; height: 20px; background-repeat: no-repeat; background-position: 0px 0px; padding-left: 25px; line-height: 20px; } a.Navlink:hover { background-image: url(nav_body.png); background-position: 0px -20px; } a.Navlink:active { background-image: url(nav_body.png); background-position: 0px -40px; }

All of these examples will help you create interactive navigation links for your web site without having to use complicated code or special programs.  If you would like to view examples of all three styles you can click here.  The CSS page for the site can be accessed directly from it by right clicking on the CSS link provided.