Getting Started

This is not a tutorial site. There are tutorials for DHTMLMenu here and the DHTMLMenu program offers an extensive Help section. This page provides a step by step explanation of how we use DHTMLMenu. It works for us, and it might work for you, too. Before we start with the step-by-step instructions, here are two recommendations that we feel are important:

Use DHTMLMenu as a standalone program. if you use Adobe GoLive, Dreamweaver, Expression Web, or FrontPage you may be tempted to integrate DHTMLMenu with your Web authoring software using one of the plug-ins supplied with DHTMLMenu. Do not succumb to the temptation; if you do, you are making more work for yourself and asking for trouble.
Do not include menu code in your pages. Always generate a JavaScript include file. There are many advantages to having your menu in an external JavaScript file, but perhaps the most important advantage is that you only have to edit and upload a single file whenever your menu changes.

OK, here is the step by step explanation of how we use DHTMLMenu:

1. The first thing we do is set up the directory structure for our site on our local system. We create a folder for all our menu resource files and, being creative types, we name this folder "menu". In addition to saving the menu resource files (images and JavaScripts) in this folder, we also save the menu definition file (the file with a .pgt extension) with our other menu resource files. When we upload the entire folder to our server, we have an online backup of the .pgt file. The .pgt file is in XML format and contains all the specifications for your menu. You must have the .pgt file if you want to edit or republish your menu.

2. Once we have set up the directory structure, we open the DHTMLMenu program. When you open the program, your are presented with a Startup window which offers you options for creating a new horizontal menu, a new vertical menu, or a menu from a template. Make your choice and click OK.

3. Now you should see a screen that looks similar to the following:

Across the top are text menus and below the text are menu icons. On the far left side of the window are the menu editing icons and to the right of the editing icons is the menu tree. In the center of the page is the preview window, and on the right side of the page are the task panels. Just below the preview window is the Resource Folder. We don't like to use the Resource Folder, so click on the Advanced icon in the upper right corner of the Resource Folder. The Advanced icon looks like this

4. Now the Resource Folder should show "Web Path". If you followed our suggestion and created a "menu"folder for your menu resource files, the path for both JavaScript and images should be similar to the following:

http://www.yourdomain.com/menu/

If you use an absolute path, your menu should work regardless of the number of levels in your site. If you want to preview your pages locally during site development, set the paths as local paths (i.e., C:\mysite\menu) but, before publishing the menu, be sure to enter the absolute paths.

5. In the Global Task menu, select "Link Prefix" and enter the absolute path (URL) for your site. It would be similar to the following:

http://www.yourdomain.com/

6. When you have finished creating your menu, it must be published. Click on the "Publish" icon above the Preview window and select "Publish JS..." to publish your menu as a JavaScript include file.

7. Place links similar to the following in your site pages:

Between the <head></head> tags:

Between the <body></body> tags in the location where you want your menu to appear:

8.When you upload files to your Web server, be sure to upload the "menu" folder.