Menu Systems for Website Navigation

3.  Controlling link appearance with event driven JavaScript functions

As an alternative to using CSS pseudo-classes to detect the link state, we can use the link's event handlers to call JavaScript functions which control the appearance of the links.

The onmousedown and onclick events clearly define the beginning and end of the "depressed" state and we can control link appearance during this state - in other words, we can now do what we should be able to do with CSS a:active rules in IE.


HTML menu definition

Using the same links as the previous example, we add the link event handlers.  The event handlers pass a reference to the link object (this) as a parameter to these functions.  This enables the functions to access the link's properties and methods.


<div class="Menu">

  <a href="Target1.html" title="Test button #1"
    onmouseover="ButtonSel(this)"
    onmouseout ="ButtonOut(this)"
    onmousedown="ButtonDep(this)"
    onclick = "ButtonClick(this); return true">Link 1</a>

  |

  <a href="Target2.html" title="Test button #2"
    onmouseover="ButtonSel(this)"
    onmouseout ="ButtonOut(this)"
    onmousedown="ButtonDep(this)"
    onclick = "ButtonClick(this); return true">Link 2</a>

  |

  <a href="Target3.html" title="Test button #3"
    onmouseover="ButtonSel(this)"
    onmouseout ="ButtonOut(this)"
    onmousedown="ButtonDep(this)"
    onclick = "ButtonClick(this); return true">Link 3333</a>

</div>

Although our HTML links have grown in size, note that the event handlers we added are structured in such a way that they are identical for each link, making menu maintenance relatively easy.


Menu logic functions

Four functions correspond to the four event handlers defined for the menu links.  These functions switch the link into one of three distinct appearances:

In this example, we choose to return the button to the "highlighted" state when the mouse button is released.

There are a number of different ways that JavaScript can be used to control the appearance of HTML elements.  These JavaScript functions control the link appearance by adding or removing a className for the <a> tags.

Note that there is no need to hide this code from older browsers.  Browsers which don't support the className property for a link will think you are creating a user-defined property and will not produce an error message.

function ButtonSel(Button) {                      // called by onmouseover event

  // Highlight button
  Button.className = "Sel";
}

function ButtonOut(Button) {                       // called by onmouseout event

  // Return button to normal
  Button.className = "";
}

function ButtonDep(Button) {                      // called by onmousedown event

  // Depress button
  Button.className = "Dep";
}

function ButtonClick(Button) {                        // called by onclick event

  // Return button to highlighted
  Button.className = "Sel";
}


Style sheet

The CSS rules are no more complex than the pure CSS approach described in the previous example.  The only difference in this version is that we address the link classNames assigned by the menu logic functions instead of the link psuedo-classes.


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

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

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

.Menu a.Dep {
  color: #CC00CC;
}

You can include a second set of buttons on the page with a totally different appearance and behavior by including a second set of links enclosed in a separate container.  The two sets of buttons could both share the same JavaScript functions.  The behaviour and appearance of the buttons in each set of buttons would be defined separately in the style sheet.


As opposed to the IE active state problems we encountered in the previous CSS example, the link now changes reliably to the active state when the mouse button is pressed and returns to normal when we return to this page.

In IE, another flaw is exposed - if the mouse pointer happens to be over a link when a page loads, the link appears in its "off" state, not the "highlighted" state until you move the mouse.  By itself, this is not a problem but if you then click the link, it goes to the "highlighted" state instead of the "depressed" state!  You can demonstrate this by clicking on a link and not moving the mouse.  When you are returned to this page, the mouse will be over the link.

At this stage, it might look like we've gone to a lot of trouble to fix one problem, only to be landed with another!  We will address this problem and the other problems noticed in the pure CSS example when we develop the link structure and menu logic for a fully working menu system.