Menu Systems for Website Navigation

7.  Using graphics for buttons

Using graphical backgrounds for the links and shifting the background position is a great way to achieve impressive button animation.  The concept is to prepare a single graphic containing a set of different images.  We use this graphic as a background for the buttons and shift its position using CSS.  The button size is carefully defined so that we only see a portion of the background graphic corresponding to a single image.

This technique is vastly superior to the old JavaScript image swapping technique because only one graphic needs to be downloaded and this can be shared between all the buttons.  Since this graphic is loaded only once, there are no delay issues when changing button appearance, resulting in superior performance.  Furthermore, that leaves us free to use either text or an additional foreground graphic for the button caption.

Bear in mind that unless printing of background images is enabled in the visitor's browser, the button caption will be printed without the graphic.


Creating expandable buttons with graphical backgrounds

We have already seen how we can use a basic HTML construct of a <span> element nested inside an <a> element to create pure CSS buttons which will automatically size to the text content.  Using this same construct, we can also make expandable graphical buttons using two graphics, which can be represented by the following diagram:


Graphical expandable button construction

The inner <span> can be considered to be "on top of" the <a> element.  If we create an over-sized background graphic with top, right and bottom edges and attach it the right side of the <a> element, then a second graphic for just the left edge of the button and attach it to the left side of the <span> element (no-repeat), we will see a button with four sides.  The two graphics must be designed to butt together to form one continuous image.  Depending on your design, you could make the button expand to the right and/or vertically.

This example consists of the following graphical components, which are placed on a matching graphical background:


Left border
Button left
Button right
Right border

In this particular design, there are two bits which go either side of the buttons to bevel the cutout area for the buttons.  There are only two background positions - "normal" and "depressed".  Both backgrounds are shifted simultaneously.  The other button states are achieved by changing the text colour.

This example uses the same Menu logic functions described in Part 5.


 

HTML menu definition

This example uses the same HTML menu definition as the previous example, with the two cutouts added before the first button and after the last button.


<div class="Menu">

  <span class="MenuBDL">&nbsp;</span>

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

  <span class="MenuSep">&nbsp;|&nbsp;</span>

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

  <span class="MenuSep">&nbsp;|&nbsp;</span>

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

  <span class="MenuBDR">&nbsp;</span>

</div>

<div style="clear: both">&nbsp;</div>


Style Sheet


@media all {

  .Menu {
    float: left;
    width: 600px;
    background:url("PLWhtMenu.gif") no-repeat;
  }

  .Menu a {
    float: left;
    cursor: pointer;
    background:url("PLWhtBTR.gif") no-repeat;
    background-position: 100% 0px;
    text-decoration: none;
  }

  .Menu a.Dep {
    background-position: 100% -34px;
  }

  .Menu a.Act {
    background-position: 100% 0px;
  }

  .Menu a span {
    float: left;
    background:url("PLWhtBTL.gif") no-repeat;
    background-position: 0px 0px;
    padding: 9px 10px 9px 10px;
    line-height: 14px;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #6F6F6F;
  }

  .Menu a.Sel span {
    color: #3F3F3F;
  }

  .Menu a.Dep span {
    background-position: 0px -34px;
    padding: 10px 9px 8px 11px;
    color: #FF7D02;
  }

  .Menu a.Act span {
    background-position: 0px 0px;
    padding: 9px 10px 9px 10px;
    color: #FF7D02;
  }

  .MenuBDL {
    float: left;
    margin-left: 30px;
    width: 2px;
    background:url("PLWhtBDL.gif") no-repeat right top;
    padding: 9px 0px 19px 0px;
    line-height: 14px;
    font-size: 5px;
  }

  .MenuBDR {
    float: left;
    background:url("PLWhtBDR.gif") no-repeat left top;
    padding: 9px 0px 19px 0px;
    line-height: 7px;
    font-size: 5px;
  }

  .MenuSep {
    display: none;
  }
}