Menu Systems for Website Navigation

8.  Fixed width buttons

In most cases, variable width buttons are ideal for menu systems.  Having the buttons adjust in size to accommodate their contents allows more freedom with website maintenance - there is no need to worry about whether a new menu caption will "fit" inside a menu button and the overall size of the menu will be more compact.

However, there are some cases where it is preferable to have fixed size buttons due to the menu design.

The HTML construct described in Part 4 to loose the dotted outline around a link and used in the previous examples relies on the size of the contents of the inner <span> element to control the overall size of the button.

To make fixed width buttons, we need two nested <span> elements inside the <a> element.


Creating fixed size buttons with graphical backgrounds

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

Button background image

In this example, the inner <span> element has a fixed width.  The text is centred within this container.

The menu frame is constructed from an outer <div> with a 1px border and an inner floated <div> to set the overall size of the menu.  The right hand side of the background graphic has a matching border.  When the buttons are stacked to the left against each other inside the menu frame, they form boxes.

 
Fixed size graphical button construction

 

HTML menu definition

We'll just look at one link here as an example:


<div class="Menu"><div>

  <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 class="Span1"><span class="Span2">Link 1</span></span></a>

  ...

</div></div>

<div style="clear: both"> </div>


Style sheet


@media all {

  .Menu {
    float: left;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
  }

  .Menu div {
    float: left;
    width: 671px;
    background-color: #5151E8;
  }

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

  .Menu a.Sel {
    background-position: 0px -25px;
  }

  .Menu a.Dep {
    background-position: 0px -50px;
  }

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

  .Menu a .Span1 {
    float: left;
    padding: 5px 2px 5px 17px;
  }

  .Menu a.Dep .Span1 {
    padding: 6px 1px 4px 18px;
  }

  .Menu a.Act .Span1 {
    padding: 5px 2px 5px 17px;
  }

  .Menu a .Span2 {
    float: left;
    width: 81px;
    line-height: 13px;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    color: #000000;
  }

  .Menu a.Sel .Span2 {
    color: #FFFFFF;
  }

  .Menu a.Dep .Span2 {
    color: #FFFFFF;
  }

  .Menu a.Act .Span2 {
    color: #FFFFFF;
  }

  .MenuSep {
    display: none;
  }
}