The Tutorial - Using a Toolbar
Setting up your menus project

Before you even start to create the menus you need to set up your project. Start DHTML Menu Builder and create a new empty project (File->New->Empty Project) .

The first step in setting up your project is to launch the Project Properties dialog. (If it doesn't appear automatically click File->Project Properties.)

Under the General tab you will see a setting called Project Name.
Type here the name of your project; for this tutorial we will call it "Tutorial", so type it without the double quotes.

The most important part of this dialog is the Configurations tab. By default, DHTML Menu Builder will create an empty Configuration for you to fill in.
Each Local configuration has two main sections, the Paths and the Target Document. In the Paths section you're telling DHTML Menu Builder where it should  store the files it creates. In the Target Document section you will tell DHTML Menu Builder which of the files in your web contains the hotspots.

The Local Path to the Root Web setting must point to the folder where your introductory HTML page is located. This file is usually named index.htm, index.html, or default.asp.
(For this tutorial we'll use the folder where you saved the hotspots.htm file, c:\DMB_Tutorial\)
When setting up the Project Properties avoid typing the paths manually, instead, use the browse buttons () provided in the dialog. As a rule, to avoid errors, it is always better to use the browse buttons in any part of DHTML Menu Builder.

The Folder to Store Compiled files must be a folder located inside the root web. It can be the same folder as the one above.
However, for organizational purposes, create a new folder under c:\DMB_Tutorial\ and name it menus. Now use the browse button to select the c:\DMB_Tutorial\menus\ folder.

The Folder to Store the Images should point to the c:\DMB_Tutorial\images\ folder you created in the previous step of the tutorial.

Now click on the Target Document  button.
This section of the configuration defines the document that will receive the menus. When using hotspots, this document is expected to contain hotspots. When using the toolbar feature, this document will be used to receive all the necessary JavaScript code that loads the menus and displays them.
Again, avoid typing it manually and use the browse button to locate the hotspots.htm file which is stored in the c:\DMB_Tutorial\ folder.

Creating the menus

This is the fun part!
Now we're going to create some sample menus that later we'll implement (or install) into the c:\DMB_Tutorial\hotspots.htm document.

So you have an idea, this is the structure of the menus we're going to create:

 Home  

Products

Computers
High Performance
Gaming Systems
Desktop Systems
Computers for the Home
Accessories
Cables
Adapters
Connectors
Batteries
-------------
Catalog Index

Links

Search the Web
xFX JumpStart

 

Contact Us

The top level items (in bold), Home, Products, Links, and Contact Us are groups (the toolbar items). The second level items (Search the Web, etc.) are the commands. The top level items (groups) will be used to create the toolbar.

So, let's start adding our menu items to the project!

First of all make sure you're in Map mode. In this mode DHTML Menu Builder displays all the menu items in a tree-like structure which makes it easier to work with the projects. You can switch modes using the modes tab on the main dialog as displayed on this image. Click here for a complete description about the Map View.

If you would like to always use the Map mode by default click on Edit->Preferences and enable the option "Default to Map View"

You will see that when a new project is created DHTML Menu Builder displays two items: the "Default" toolbar and the "(NoToolbar)" item.
The "Default" toolbar is an empty toolbar that DHTML Menu Builder creates every time you start a new project.
The "(No Toolbar)" is a special item that holds all the menu items that are not associated to any toolbar. Groups under this special item will not be part of any toolbar.

The first thing to do is to rename the "Default" toolbar item. To do so select it and click Edit->Rename
Now type "My Toolbar" (without the double quotes). Although this will not affect our project in any way it is a good idea to keep things organized.

To add a group to your project and under "My Toolbar", select the "My Toolbar" item and click Menu->Add Group
DHTML Menu Builder will add a new group and wait for you to type its caption. The caption is the actual text that will be displayed when the menus are viewed from a browser.

Other ways to create a new group are:
    - Press the F6 shortcut key
    - Right click any toolbar item and click
Add Group
    - Click on the Add Group icon () on the toolbar

Type Home and press the ENTER key on your keyboard.

Because this item does not contain any commands (menu items) select (none) from the Action Type parameter of the Over event.

Add the second group: Products
You can use any of the above mentioned methods to create this new group.
Now, we can add commands to this group.

 

Now we will add the commands to the "Products" group.

To add a command to the Products group, select it and click Menu->Add Command
DHTML Menu Builder will add a new command and wait for you to type its caption. Type "Computers" (without the double quotes).

Other ways to create a new command are:
    - Press the F7 shortcut key
    - Click on the Add Command icon () on the toolbar

Create another command by clicking Menu->Add Command and name it "Accessories".

Now, let's add a special type of command, a separator.
Separators are just horizontal lines (or vertical if the commands layout is set to horizontal) which can be used to separate commands inside the same group.

To add a separator click Menu->Add Separator
Because separators do not display any text DHTML Menu Builder will not prompt you its caption. In fact, when a separator is selected, all the fields in the Command Properties are disabled.

Repeat the above process to add a command and name it "Catalog Index".

Now let's create a subgroup (or submenu) under the Computers command.

Subgroups (or submenus) are menu items that are displayed when a command is selected. This is very useful to keep your menus organized under main categories. This will not only keep your menus organized but will also make them a lot easier to use by your users (the visitors of your web site... the ones you are designing these menus for).

Select the Computers command and click Menu->Add SubGroup
Add these commands to the subgroup:

  • High Performance
  • Gaming Systems
  • Desktop Systems<br><small>Computers for the Home</small>

Notice that the last command contains several HTML tags. The <br> tag is used to create multi-line captions and the <small> tag is used to reduce the size of the text. As you'll see in the Live Preview pane, DHTML Menu Builder has created a multi-line command. Multi-line commands are commands whose Caption contains two or more lines of text.

You can use virtually any HTML tag on the menu item's caption. Although not all the tags will be properly rendered by the Live Preview, they will look just fine when you view your menus with a browser.

Let's now create another subgroup.
Select the Accessories command and click Menu->Add SubGroup
Add these commands to the subgroup:

  • Cables
  • Adapters
  • Connectors
  • Batteries

Finally let's add the last two toolbar items.
Right click the "My Toolbar" item, click Add->Group and name the new item "Links".
Add these commands to the Links group:

  • Search the Web
  • xFX JumpStart<sup>®</sup>
To add the ® symbol press and hold the ALT key and then type 0174 on your keypad.

Again, right click the "My Toolbar" item, click Add->Group and name the new item "Contact Us".
Remember that since this group will not contain any commands (menu items) select (none) from the Action Type parameter of the Over event.

At this point DHTML Menu Builder's interface should look like this:
(note that the names of the subgroups may vary)

 

If you want to take a look at how your menus are working so far, click Tools->Preview.

Because the preview uses an instance of Internet Explorer what you see on the preview is what you will actually see when your menus are implemented on the pages of your web site.

Continue »