Menu Systems for Website Navigation

9.  Irregularly shaped buttons

To create irregularly shaped graphics, we can use transparency to give the impression of an irregularly shaped object, even though in reality we are still confined to a rectangular graphic.

Creating irregularly shaped expandable buttons with graphical backgrounds

LH background image  RH background image

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

To create expandable buttons, we use two images to form the button background.

We need to use the same 3 layer HTML construct described in the previous example, but we use it in a different way to ensure that the two background images which form the irregular shape do not overlap, thus preserving their transparency.

The padding in the middle element prevents the two background images from overlapping each other.

This construct is also ideal for making a tab-style menu, where the tabs overlap slightly and you want to have the active tab appear to come to the front.

This construct can be represented by the following diagram:

Irregularly shaped graphical expandable button construction


Style Sheet

@media all {

  .Menu {
    float: left;
    width: 600px;
    background:url("MenuRound.gif") no-repeat;
    padding: 10px 3px 10px 3px;

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

  .Menu a .Span1 {
    float: left;
    background:url("RoundBTL.gif") no-repeat;
    background-position: 0px 0px;
    padding: 0px 0px 0px 11px;

  .Menu a.Sel .Span1 {
    background-position: 0px -27px;

  .Menu a.Dep .Span1 {
    background-position: 0px -54px;

  .Menu a.Act .Span1 {
    background-position: 0px -81px;

  .Menu a .Span2 {
    float: left;
    background:url("RoundBTR.gif") no-repeat;
    background-position: 100% 0px;
    padding: 5px 12px 8px 0px;
    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 {
    background-position: 100% -27px;

  .Menu a.Dep .Span2 {
    background-position: 100% -54px;
    padding: 6px 11px 7px 1px;

  .Menu a.Act .Span2 {
    background-position: 100% -81px;
    padding: 5px 12px 8px 0px;

  .MenuSep {
    display: none;