A Simple Menu

This page describing how to create a very simple menu. For a more complex multi-level menu, you should check out the Spry menu.

The example below shows a very simple, single level menu. This uses a table to layout the items in the menu and a style sheet to control its appearance.

Home Overview Process HTML Dreamweaver How To... Techie Links

Linking to the Style Sheet

Link Style Sheet DialogThe appearance of the table is controlled by the simplemenu.css style sheet. This must be linked into the page where you are going to add the menu. You can do this using the Attach Style Sheet button on the CSS tab menu (this page shows you where to find the link button). Clicking on this button will bring up the Attach External Style Sheet dialogue as hown on the right.

You would then use the Browse... button to find the style you wish to link to and click OK to create the link. The styles will then be available in your page.

The Containing Table

The menu is contained in a table. In this case, it is 1 row and 8 columns. This gives a horizontal menu. If a vertical menu was required, then the table would be 8 rows and 1 column. The table width is left blank to allow it to autosize to its contents and the border is set to 0. For instructions on how to create a table check here.

Once the table is created, you should set its class to simplemenu. To do this, select the whole table and then, using the Style drop down in the Properties panel, select the entry simplemenu. You should then see the appearance of the table change to reflect the styles.

Adding the Content

Adding the links is simply a matter of typing text into the table cells and then creating the links.

Controlling the Appearance

If you want to change how the menu looks, you will have to edit the style sheet. You can either do this through the Dreamweaver interface, or by opening the style sheet and editing the rules manually. If you open the stylesheet you will see that the rules have lots of comments describing what each part of the rule does.

If you need a reminder, you can find more information about style rules and selectors in this section of the site.

A Neat CSS-Based Menu

An alternative approach, with some clever use of CSS selector rules to create a dropdown menu, can be found on the Handy HTML site here (I suggest you use the updated version they present, not the original version - particularly if your page already uses unordered lists):