Go to TopOther Menu Designs

In the Master Page tutorial we styled a simple HTML list to produce a horizontal menu bar with buttons of a fixed with. As the pointer hovered over the buttons they changed colour to indicate, where applicable, their function as a link to another page.

If you have one button that requires substantially longer text, or need to squeeze buttons into as small a space as possible, you may want buttons that expand or contract according to the length of the text. Alternatively, your design may require a graphic background, or you may want to replace the horizontal menu with a vertical one. This page discusses the few simple changes to the menu styling that effects such changes.

In each case open the CSS Stylesheets dialogue select each of the selectors in turn and make the changes indicated below.

Go to TopFrom Fixed Width to Expanding Buttons

In the original Master Page the buttons are of fixed width. This is acceptable if all the text is of similar length, but an be very wasteful of space if one button has much longer text. To change to variable width buttons that expand and contract with the text requires changes in both the basic button (the "hmenu li" selector) and button link ("hmenu a") rules:

Horizontal Fixed Width Horizontal Variable Width
#hmenu li {
    color: white;
    background-color: black;
    border-right: 1px solid black;
    float: left;
    width: 85px;
    }
#hmenu li {
    color: white;
    background-color: black;
    border-right: 1px solid black;
    float: left;
    padding: 0px 20px;
    }
#hmenu a {
    color: white;
    background-color: #003366;
    display: block;
    text-decoration: none;
    }
#hmenu a {
    color: white;
    background-color: #003366;
    display: block;
    text-decoration: none;
    margin: 0 -20px;
    padding: 0px 20px;
    }

EXPLANATION: In this simple case, it is just a matter replacing the basic button's width rule with appropriate margin and padding rules for both the basic and link button types. To edit these, select the "Box" tab on the CSS Stylesheets dialogue and edit the entries as needed.

See a page that demonstrates the coding for a Variable Width Menu.

Go to TopFrom Menu Bar to Centred Menu

If your page design does not call for a menu bar, but instead you want a set of menu buttons centred in the middle of the page all you need to change is the rules under the #hmenu selector:

Horizontal Fixed Width Horizontal Centred
#hmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 2.5em;
    height: 2.5em;
    border: 1px solid black;
    background-color: #003366;
    }
#hmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 2.5em;
    height: 2.5em;
    border: 1px solid black;
    width: 344px;
    margin-right: auto;
    margin-left: auto;
    }

EXPLANATION: As we saw when building the Master Page, it is the height, background colour and border that define the menu bar in the original design. Without any rule to limit it, the bar expands to the full width of its containing block. We need the height and border to be retained but the background colour is now redundant. Open the "Background" tab on the dialogue and delete the colour entry. Open the "Box" tab and add the Width setting. You will need to adjust the value according to the width and numbers of the buttons on your menu. The left and right margins need to auto-size to fit the space available and it is these that centre the menu.

As the menu bar disappears there is now no colour to the sides of the menu. This can be resolved in a number of ways. You could add apply a background colour to the body of the page. You could move the "hmenu" container and paste it in the "header" block before or after the "Site Title" text (If you cut and paste the block a blank line space will be left behind. To close that up place the cursor in the blank line and hit the backspace key to remove the <br> tag that KompoZer will have placed there). You could also retain the menu bar by adding a further <div> styled with an appropriate background colour and place the "hmenu" container inside that.

See a page that demonstrates the coding for a Centred Menu.

Go to TopFrom a Horizontal to Vertical Menu

Apart from an styling changes needed to convert a horizontal menu to a vertical design, its position on the page also needs to be considered. This implies changes to the Master Page structure. In the description below the vertical menu will replace the #col1 block, so the first thing to do is to double-click on the #col1 selector to the left of the CSS Stylesheet dialogue. This opens a further dialogue which allows the selector to be edited. Change the name "#col1" to "#vmenu" (without the quote). Click the OK button to confirm the change in selector name and then OK again to close the CSS Stylesheets dialogue. Next, with the cursor within the col1 block, right-click status line tag <div id="col1">. From the menu select "ID", then "vmenu".

Now the vertical menu code already includes three key lines of styling code:

float: left;
width: 150px;
background-color: #cccccc;

Now the further changes required to create a vertical menu from the hmenu code can be added. Below is shown the comparison of the old #hmenu code and that which must be added to the #vmenu rules  inherited from the old #col1 code:

Horizontal Fixed Width Vertical
#hmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 2.5em;
    border: 1px solid black;
    height: 2.5em;
    background-color: #003366;
    }
#vmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 2.5em;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    }

EXPLANATION: In a vertical format the menu has no need to provide for an empty menu bar, so under the #vmenu selector height should be deleted (Edit this settings on the "Box" tab). A grey background colour already exists, inherited from the col1 code. However, this will be completely covered by the menu buttons. However, If anything other than the unordered list that forms the menu is to be added to the block it will need to be changed. The borders are changed to remove the bottom border (accessed under the "Borders" tab).

Changes also need to be made to the code for the buttons:

Horizontal Fixed Width Vertical
#hmenu li {
    color: white;
    background-color: black;
    border-right: 1px solid black;
    float: left;
    width: 85px;
    }
#vmenu li {
    color: white;
    background-color: black;
    border-bottom: 1px solid black;
    }

EXPLANATION: As button width will now be determined by the width of the #vmenu block itself, so the width setting is deleted. Similarly, as there is no need to force a horizontal layout the float rule can be deleted (Both of these settings are found under the "Box" tab). The border now needs to form the bottom edge. The other three sides are supplied by the code for the #vmenu block (Edit under the "Borders" tab).

NOTE: If there are both vertical and horizontal menus on the site which are to have an identical colour scheme then rather than duplicate the full set of "hmenu" rules, you need only to double up the names of the following selectors. i.e.:
"#hmenu ul" becomes: "#hmenu ul, #vmenu ul"
"#hmenu a" becomes: "#hmenu a, #vmenu a"
"#hmenu a:hover" becomes: "#hmenu a:hover, #vmenu a:hover"
(i.e. Produce a comma separated list of the the selectors to which the original rules will apply).
To achieve this, on the CSS Stylesheets dialogue, double-click the selector name then, on the dialogue that opens, edit the entry. Repeat this for all the other selectors that are to have no changes made to them.

The text of the new vertical menu can now be inserted as an unordered list. Click the Unordered List button on the toolbar and add the button legend. Hit the ENTER key to confirm the entry and to create a further button.

See a page that demonstrates the coding for a Vertical Menu.

Go to TopAdding Graphics to a Menu

Three state button image

Graphic backgrounds to menu buttons have the potential of enhancing the appearance of a site. The technique used here uses a background image only. The means that button text can, as before, be indexed by search engines and the menu will download faster than those that use separate images for each menu option.

As with the other menus in this collection, a button can have three possible states, the "basic button", "button link" and "button hover". The image used in the demonstration page, is the one shown on the right and is 115px by 90px but only one third of the entire image is ever displayed.

Horizontal Fixed Width Horizontal Graphic
#hmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    line-height: 2.5em;
    height: 2.5em;
    background-color: #003366;
    border: 1px solid black;
    }
#hmenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    line-height: 1.9em;
    }
#hmenu li {
    color: white;
    float: left;
    width: 85px;
    background-color: black;
    border-right: 1px solid black;
    }
#hmenu li {
    color: white;
    float: left;
    width: 115px;
    background-position:  0px 0px;
    background-repeat: no-repeat;
    background-image: url(images/button.gif);
    }
#hmenu a {
    color: white;
    display: block;
    text-decoration: none;
    background-color: #003366;
    }
#hmenu a {
    color: white;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 0;
    background-position: 0px -30px;
    background-repeat: no-repeat;
    background-image: url(images/button.gif);
    }
#hmenu a:hover {
    background-color: #333333;
    }
#hmenu a:hover {
    color: #003366;
    background-position: 0px -60px;
    background-repeat: no-repeat;
    background-image: url(images/button.gif);
    }

As presented, the #hmenu section of the code does not include a menu bar, but this can easily be added with these three lines of code:

height: 1.9em;
background-color: #3366cc;
border: 1px solid black;

The variations in dimensions and colour simply reflect the button graphic used which varies in size from the text buttons in the other demonstration pages.

The basic button selector (#hmenu li) width reflects the size of the button graphic. The original background colour and border settings are now redundant. The background position syntax, defines where the top left corner of the image will be displayed. In this case the top left corner matches with the top left of the image itself (but only the top 30px (equivalent to 1.9em) will be displayed, because of the height selected for the menu). There is no repeating for the graphic and the image file itself is located in the conventional images sub-folder of where the pages are located.

The Link button selector (#hmenu a) has similar changes. The background colour is no longer required, again replace by the image, his time lifted above the top line of the block in which it is to be displayed by 30px, forcing it to display the middle button of the three on the graphic. The margin and padding settings are needed to ensure that the margins align with the containing block and the image displays in its correct position.

Finally, the Button Hover selector (#hmenu a:hover) has similar changes. The background colour is redundant and is replaced by the graphic, this time moved up by 60px to reveal the bottom part of the image. The colour change is simply cosmetic appearing more in keeping with the changed colour scheme reflected in the graphic.

See a page that demonstrates the coding for a Graphical Menu (with the optional menu bar).

Go to Top Page updated: 16 November 2009