Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

1. Create a single level menu.
   
   Alternatively, you can unpack these files from chkpt1.zip in the support files.
   Follow the instructions in the 'Single-level Menu' tutorial to create a simple menu with 12 menu items on a page named index.htm (do not create page stubs*).

   Using 'index.htm' as the active page, open Menukit. *We want Menukit to create a set of page stubs in step 5 but it will only create stubs for missing pages.

2. Required menu structure.
   The diagram below shows the shape of the structure we want. It consists of a main menu with two nested submenus. Note. To make the diagram we just took a screenshot of a Menukit Explorer menu that clearly shows the required hierachical structure.
   It is not necessary to make the directory structure the same as the menu structure. We did it just to make it easier to remember where our pages are stored.

   We decided to organise a similar directory structure for the site files.

   	pg1.htm pg2.htm   sub1/pg4.htm sub1/pg5.htm   sub1/sub2/pg7.htm sub1/sub2/pg8.htm sub1/sub2/pg9.htm sub1/pg10.htm pg11.htm pg12.htm
   Required menu structure

   The diagram shows page pathnames opposite the menu items that link to them.

   The first level directory is named 'sub1' and the second level directory, nested within it, is named 'sub2'.

3. Create the structure.
   You can open/close a submenu in the Treeview at any time by clicking on the icon to the left of its parent.
   Click the 'Structure' tab to bring it forward.

   First, we will make items Seven, Eight and Nine a submenu of item Six...

   ...while holding down the Shift key (Windows) or Command+Shift (Macintosh), click item Seven and then item Nine. With these 3 items selected, click the Indent button.

   See how these items are now shown as a submenu of item Six in the Treeview.

   Hold down the Shift key (Windows) or Command+Shift (Macintosh) and click item Four and then item Ten (selecting 7 items altogether). Click the indent button.

   That's all it takes. We have finished creating the required structure.

   The Treeview in the Structure tab should now look like this:
   

4. Update the links.
   
   Notice how the links on items Three and Six are removed in the edit window. Parent items open/close submenus and do not link to pages.

   If you followed the instructions in the 'Simple Menu' tutorial then the links are pg1.htm, pg2.htm, etc. We need to change these links to reflect the new directory structure as shown in the diagram above.

   Hold down the Shift key and click on item Four and then on item Ten. You should now have the 7 items Four through Ten selected.

   Click to open a new multi-edit window.

   Change the link for item Four from 'pg4.htm' to 'sub1/pg4.htm'.

   Update the remaining links to reflect the directory structure in the diagram above. i.e. the pages for items Four, Five and Ten have a path 'sub1/'.

   Items Seven, Eight and Nine have the path 'sub1/sub2/'.

   Click OK to return to the Structure Tab.

   The Treeview in the Structure tab should now look like this:
   

5. Create Page Stubs.
   At this stage your site files should look like the contents of chkpt2.zip which you can find in the support files.
   Click the Menu tab. Place a tick in the 'Create page stubs' checkbox.

   Save and exit Menukit.

   Menukit generates 12 new pages as well as the folders sub1 and sub2. Save all open files and upload the site to your server and test.