Revenge of the Menu Bar

This article details the construction of a menu bar like the one used on the main pages of this site. It's built from standard HTML elements using CSS to define the look and layout and JavaScript to handle the action of the drop down menus.

Basically, we want to emulate the look and behavior of the menu bar commonly found on windowed applications. That is, display a row of buttons which when clicked on, display a drop down menu. Additionally, the menus may have one or more sub menus (which may in turn have sub menus).

The Menu Bar Components

To build the menu bar, a set of HTML tags and style rules are defined for each component: the bar, the buttons, the drop down menus and the individual menu items.

Constructing the Bar

First, the bar. A DIV tag is used with a style class defined to set the appearance.

div.menuBar {
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}

div.menuBar {
  background-color: #d0d0d0;
  border: 2px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  padding: 4px 2px 4px 2px;
  text-align: left;
}

...

<div class="menuBar">&nbsp;</div>

The font settings are placed in a separate style rule so that they can be shared with the classes for other components, like the buttons and menu items. This helps ensure that the bar will be properly sized around the buttons.

Here's a sample of what it looks like.

Adding the Buttons

For the buttons, normal hypertext links (A tags) are used. This way, both a style class and a hover: pseudo-class can be defined to set the default and mouseover appearance. The style sheet is updated as follows.

div.menuBar,
div.menuBar a.menuButton {
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}

div.menuBar {
  background-color: #d0d0d0;
  border: 2px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  padding: 4px 2px 4px 2px;
  text-align: left;
}

div.menuBar a.menuButton {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #000000;
  cursor: default;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 6px;
  position: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

div.menuBar a.menuButton:hover {
  background-color: transparent;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  color: #000000;
}

First, note that the button's border color on the normal class matches that of the bar background, so it will remain invisible until moused over. Also, the cursor:default setting to used prevent the normal link cursor from displaying when the buttons are moused over. This makes it look more like a menu bar found on a typical application window. The reason for using relative positioning will be seen later.

Once the button links are placed inside the bar's DIV tag, then menu bar starts to take shape. Here's a sample of the HTML code and the result.

<div class="menuBar">
<a class="menuButton" href="" ...>Button 1</a>
<a class="menuButton" href="" ...>Button 2</a>
<a class="menuButton" href="" ...>Button 3</a>
<a class="menuButton" href="" ...>Button 4</a>
</div>

You can see how the :hover class gives a nice mouseover effect on the buttons.

Additional Button Styles

When a button is clicked on, we want to change its appearance, making it look depressed. This is done by defining another style class.

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
  background-color: #a0a0a0;
  border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  color: #ffffff;
  left: 1px;
  top: 1px;
}

This new style class can then be added to the other in a button tag's CLASS attribute via scripting. For now, we can hard code it on a button link just to see what it looks like:

<div class="menuBar">
<a class="menuButton" href="" ...>Button 1</a>
<a class="menuButton menuButtonActive" href="" ...>Button 2</a>
<a class="menuButton" href="" ...>Button 3</a>
<a class="menuButton" href="" ...>Button 4</a>
</div>

and the result:

You can see how using relative positioning helps to make the button look "pressed in" by moving it down and right. Note how the hover effect was overridden so the active button no longer changes in appearance when moused over.

Next, we construct the menus to go with the bar and buttons.

Next