Print this Tutorial Print
Create a Single-level Menu

Objective Intruduce the Menukit user interface while creating a simple single-level menu containing 12 items. The menu that we create here is used as the starting point for a tutorial on creating a multi-level menu.

Here we are creating a CSS Flyout menu but you can choose whatever type of menu you want from among the available types in the 'Type' field on the Menu tab.


  1. Create a new blank page. Start Dreamweaver in an empty site and go to: File->New...

    On the General tab, select category 'Basic page' and then select 'HTML' in the 'Basic page' panel. Create the page. Save the page as 'index.htm'.

  2. Create the menu.
    Menukit creates a subdirectory FN in your site's root directory and inserts a set of images, a stylesheet and JavaScript support files. The filename of the stylesheet is based on the menu id (the stylesheet will be named M1.css in this example). If you test your pages on a server then remember to upload the FN directory as well as the index.htm page.
    Open the Menukit extension, Commands->Menukit.

    With the Menu tab selected, click the 'Create new menu' button Create new Menu to open a dialog box. Enter a short identifier, eg 'M1' (without quotes), to identify the menu and press the 'OK' button.

    Select option 'CSS Flyout' in the drop-down list labelled 'Type'.

    Select option 'Blue2' in the drop-down list labelled 'Theme'.

    Tick the '3-D Buttons' checkbox.

    Enter 100px into the field labelled 'Top' and 20px into the 'Left' field to position the menu on the page. Leave all the other fields and checkboxes just as they are.

  3. Insert the first two menu items.
    When the Structure tab is selected in an empty menu only the 'Add item' button Add item is enabled.
    Click the 'Structure' tab to bring it forward (note that the input fields on the Structure tab are disabled).

    Click Add item once. The input fields become enabled and a highlighted line appears in the Treeview region.

    Click inside the 'Label' input field and change the text from 'New Item' to 'One'. Click within the 'Alt' input field and key in the text 'Page One'.

    Click Add item again and enter the text 'Two' and 'Page Two' into 'Label' and 'Alt' fields.

  4. Insert the remaining menu items. You could continue like this to enter the remaining menu items but we will now use a quicker method to enter another 10 menu items.

    Click within the second line in the Treeview panel to highlight it and then click Add item 10 times.

    Whenever you select more than one item in Treeview, the Multi-edit feature becomes enabled. Note that the selected items do not need to be contiguous - you may select items from anywhere in the tree by holding down the Control key and clicking on the individual items.
    While holding down the shift key (Windows) or Command+Shift (Macintosh) click the first of the new items to select it and without releasing the shift key click on the last item. The 10 new items become highlighted.

    Click the 'Multi-edit' button Edit multiple item to open a new edit window that allows you edit the highlighted items in a separate data grid.

    Select the first item in the Label column and key in 'Three'.
    Press the Down Arrow key (Windows) or Command+Down Arrow (Macintosh) and enter 'Four'.

    Continue like this until you have entered 'Twelve' in the last line.

    In a similar way, enter a set of text items 'Page Three', 'Page Four',...,'Page Twelve' in the Alt column.

    Press 'OK' to accept the edits and return to the Structure tab. At this stage we have defined a single-level menu with 12 items. However we have not defined any links for these items. We'll take care of that in the next step.

  5. Use the Multi-edit feature to insert links for the menu.
    For clarity we will simply name our 12 pages pg1.htm, pg2.htm,..., pg12.htm.
    In this example we are using document-relative paths for our links. Each link is expressed as being relative to the location of the current page, index.htm.
    Select all 12 items. While holding down the Shift key (Command+Shift on Macintosh), click item 'One' and then item 'Twelve' and press Edit multiple item.

    When the "Edit multiple items" window opens click the checkbox labelled "Link" below the edit window.

    Enter 'pg1.htm' into the first row in column 'Link'.

    While the cursor is still in this cell (i.e. pg1.htm), press the 'Ditto' button Copy selected field(s) from line above repeatedly to see how an input field can be duplicated down through the rows below.

    [ The Ditto button Copy selected field(s) from line above may not be especially useful in this particular example but you may find it useful when entering a series of long URLs that have common path components.] Go back and correct the data you have just created by keying in the correct values in rows two to twelve i.e. 'pg2.htm' to 'pg12.htm'.

    Press OK to return to the Structure tab.

  6. Save and Exit.
    You can use the 'Save' button in Menukit at any time to save your work without closing the extension.
    The 'Exit' button will also ask you if you want to save any unsaved work before exiting.
    Press 'Save' and then press 'Exit'. If you are working in Design View you should now see a menu on the index.htm page. You may need to hide Visual Aids (Ctrl+Shift+I on Windows) / (Command+Shift+I on Macintosh) to see it clearly.

    Save this page and then view it in a browser. Note If you view the menu in Internet Explorer it may display an "Active Content" warning (because some JavaScript is needed to make the menu work in IE6). You must allow the blocked content for the menu to work properly.

    If you are uploading and testing on a server then you must also upload the entire contents of the FN folder that Menukit creates in your site's root folder.

  7. Generate page stubs.
    At this stage your site files should look like these support files.
    Open Menukit and tick the "Create page stubs" checkbox on the Menu tab.

    Save and Exit.

    Menukit generates 12 new pages named pg1.htm,...,pg12.htm. Save all open files and upload the site to your server and test.


Note that these are only basic page stubs and they do not contain a copy of the menu. If you use the menu to load any of them you will need to use the 'Back' button on your browser to get back to the index.htm page. In a later tutorial we'll see how we can use a template to generate a set of pages each of which has a copy of the menu.