Menu Systems for Website Navigation

6.  Bringing our buttons to life

Having developed a menu system which uses CSS and JavaScript to control it's appearance and behaviour, we can now turn our attention to turning our links into buttons.

The infrastructure we put in place for the HTML menu definition in Part 4 to loose the dotted outline around a link provides the basis for turning plain links into buttons, provided we observe the restrictions stated in Part 4.


Pure CSS buttons

This example uses the same HTML menu definition described in Part 4 and the same Menu logic functions described in Part 5.  To change our menu's appearance, we only need to change the style sheet.

In this example, we need to get rid of the separators we created in the HTML menu definition.  We do this by adding a rule in the stylesheet to hide the seperators.  Therefore, they will only be seen when viewing the menu with older browsers.

We use the inner <span> of our HTML links to create the bevelled button.

To get the "depressed" button effect, we swap the colour of the borders around to give the impression it has been pushed down.  In addition, we shift the inner text by changing the internal padding of the <span>.  For this to work, the button must either be (or contained in an element which is) absolutely positioned, positioned by a table cell, or floated within an absolutely positioned object, otherwise the button will shift instead of the text!

 
 

Style sheet


@media all {

  .Menu {
    float: left;
    background-color: #CCCC99;
    padding: 8px 15px 8px 7px;
  }

  .Menu a {
    float: left;
    margin-left: 8px;
    text-decoration: none;
  }

  .Menu a span {
    float: left;
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
    border-color: #9F7F54 #70512A #70512A #9F7F54;
    background-color: #86663D;
    padding: 2px 4px 2px 4px;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    color: #FFF8CA;
  }

  .Menu a.Sel span {
    border-color: #BF9F8E #86663D #86663D #BF9F8E;
    background-color: #9F7F54;
    color: #FFF8CA;
  }

  .Menu a.Dep span {
    border-color: #ED9A2A #F5CA8A #F5CA8A #ED9A2A;
    background-color: #F2B460;
    padding: 3px 3px 1px 5px;
    color: #FFFFFF;
  }

  .Menu a.Act span {
    border-color: #F5CA8A #ED9A2A #ED9A2A #F5CA8A;
    background-color: #F2B460;
    padding: 2px 4px 2px 4px;
    color: #FFFFFF;
  }

  .MenuSep {
    display: none;
  }
}