Menu Systems for Website Navigation

2.  Controlling link appearance with Cascading Style Sheets

It is recommended these days that we control web page appearance by using Cascading Style Sheets rather than HTML attributes, since this offers more powerful and elegant control.

This example of use of the CSS psuedo-classes is described specifically in the W3c CSS-2 specifications.


HTML menu definition

We can refer to the menu and its components with CSS by adding a class attribute to the <div>.  (We could also achieve the same result by adding an id attribute to the <div>, but using a class attribute allows us the option of having more than one such <div> on the same page.)


<div class="Menu">

  <a href="Target1.html" title="Test button #1">Link 1</a>

  |

  <a href="Target2.html" title="Test button #2">Link 2</a>

  |

  <a href="Target3.html" title="Test button #3">Link 3333</a>

</div>


Style sheet

We can specify overall attributes for the appearance of the links and specific atributes for each state of a link.  In this example, we specify an overall appearance for the link, rather than specifying two separate appearances for the link and visited psuedo-classes.  This defines the normal or "off" link appearance.  Two additional styles correspond to the hover and active psuedo-classes.  Note that the order of these rules is important.

While we're at it, we will specify an overall font for the menu and an overall colour which will affect the separators only.


.Menu {
  color: #904900;
  font-family: arial, helvetica, sans-serif;
}

.Menu a {
  font-weight: bold;
  text-decoration: none;
}

.Menu a:link  {
  color: #009900;
}

.Menu a:visited {
  color: #00FF00;
}

.Menu a:hover {
  color: #FF6600;
  text-decoration: underline;
}

.Menu a:active {
  color: #CC00CC;
  text-decoration: none;
}


In modern "standards compliant" browsers, this works exactly as expected, with the link returning to the hover state when the mouse button is released.

Netscape 4 does not support the CSS dynamic psuedo-classes a:hover and a:active rules, doing nothing on mouseovers and still turning the link red when the mouse button is depressed.  However, Netscape 4 does not appear to have a problem when exposed to these rules - it simply ignores them.

More problems exist with IE browsers.  In IE, the a:link, a:visited and a:hover rules work correctly by themselves.  However:

For simple links, we might be prepared to accept these limitations.  If we want to make links that look like buttons that behave realisticly, the above limitations are unacceptable.

The relatively simple yet potentially powerful code shown above cannot be used on the Internet because it does not work with all versions of IE, which are currently used on the Internet.