This is the first in a series of 3 articles discussing simple rollover techniques for menus in web pages. Using styles and some very simple javascript a wide variety of menu looks can be created.
This article is the first in a series about rollover technology for menus on web pages.
If you are comfortable with
HTML and using styles you can do rollovers in menus. Some techniques involve a small amount
of Javascript but do not require a commitment to learn Javascript, just be able to cut and
paste and modify from a single line of code.
These techniques will be geared towards single
level menus, not multiple level menus with drop-downs. However, in my experience most situations
are served very well with single level menus. As of this writing this web site is using single
level menus that use very simple techniques described here. Once you enter the multiple level menu
world you are doing DTHML programming, which is another topic.
There are three basic types of rollovers, based on the effect that you want.
- Modify text during a rollover
- Change an image during a rollover
- Change an image and modify text during a rollover
This article will discuss the first type of rollover. Subsequent articles will
discuss the other two types.
Rollover type 1: Modifying text during a rollover
First I want to point out that the <A> tag which may have has styles applied to it is
the basis for many of the techniques described here. Its a very handy and flexible primitive
and can let you create a lot of looks with no Javascript at all. In fact, as of this writing the menus
used on this web site are nothing more than tables with links and a background color with
styles applied to an <A> tag.
Define the look for the 4 different <A> states
The style tag for a link to be used for a menu and an example tag
can look something like this:
<style>
a.menulink:link {color:#124676; text-decoration:none; }
a.menulink:visited {color:#124676; text-decoration:none; }
a.menulink:hover {color:#124676; text-decoration:underline; }
a.menulink:active {color:#124676; text-decoration:none; }
</style>
<A class="menulink" href="">I am a menu option</A>
I've enumerated all of the options for each state (link, visited, hover and active) as a way
of emphasizing that you can change the look for each state. In the most common scenario you will want to
keep everything the same and only change the behavior when the mouse is in the "hover" state,
which is when the mouse is rolled over the link. In this example we just add the underline
to the text when its rolled over. Any css change that can be applied can be specified, of course.
Here is an example of this tag with this style applied. Roll over this to see the effect:
Build a menu with a set of tags in a table or list
Lets create a row of these so it looks like a menu. We will use a table to contain
the menus because, well, its a table of entries. There are other ways as well.
Tables get a bad rap in HTML because
of misuse, to which I say "Tables don't kill web pages. People kill web pages", and you
can quote me on that.
Modify the style of the table cell to change the look
Pretty plain, though, huh. Lets put a background color on the table cells.
Hmm. Lets adjust up the spacing and padding and put a border between the cells. These
are all changes to the style of the <TD> tag, so they can be put in a stylesheet.
Not too shabby! There are lots of knobs to turn here. I've always thought that
small caps were an attractive look. Lets add that the to style applied to <A> tag.
Looking good! Lets adjust the width of the cells so that they are the same, and center the text. Again,
these are all changes to the table cell style.
Kick it up a notch with an image background
Although we've been using a colored background here you can also use an image as the
background for each element, again modifying the style of the table cell. Note that these
images don't change when the mouse rolls over, only the text changes. However, an entire world
opens up with the use of image backgrounds, all by modifying the table cell style.
Here's a friendly little graphic
Lets make that graphic the background of the menu options.
Another trick, use different images in each cell
A variation on using images is to create one large image that has some thematic element and
chop it up, using one piece for each menu option.
Here is a long image with a line that goes from one end to the other.
We'll chop that image up and put a part of it behind each link.
Go from horizontal to vertical by just making each cell a row
Now lets take the same menu and show it vertically, with the border in between each
entry. We just turn table cells into one cell per row, and change the location
of the border. We'll also left align the text.
In Review
So, armed only with the <A> tag and table cell styles you can produce a wide variety
of menu looks. If you add in some images
for the background you can produce a stunning variety, all with no javascript.
If you are a programmer generating web sites
from databases you will also see that these kinds of menus are easy to generate dynamically.
In the next article I'll discuss the second technique, swapping out images to create a menu entry.
In that article we will brush up against Javascript but you will have a set template
to work from.