The Tutorial - Using HotSpots
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) .

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.)

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.

Every configuration has two main sections, the Paths and the HotSpots Editor. In the Paths section you're telling DHTML Menu Builder where it must store (save) 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 you introductory HTML page is located. This file is usually named 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.

The Folder to Store Compiled files must be a folder located inside the root web or it can be the same as well.
For organization purposes, create a new folder under the 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 Menu button.
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.

Finally click on Tools->Toolbars Editor and click on the Delete Toolbar button () to avoid DHTML Menu Builder from creating a toolbar.

Creating the menus

This is the fun part!
Now we're going to create some sample menus that later we'll attach to the hotspots we created in the first step of the tutorial.

So you can have an idea, this is the structure of the menus for the Products hotspot that we're going to create.
This is composed by a main group (also known as a root level menu) where two of its commands will display a submenu with more options.

Menus are composed of two basic elements: groups and commands, so let's start creating the first group:

Before you add the first group it is recommended that you switch to the "Normal" view. By default DHTML Menu Builder will start in "Map" mode; in this mode DHTML Menu Builder modifies the way the menu items are presented in the project so its easier to work with toolbars. Since we're not going to use toolbars it is highly recommended that you switch to the "Normal" mode. To do so simply click on the "Normal" tab.

To add a group to your project select Menu->Add Group
DHTML Menu Builder will add a new group and wait for you to give it a name
Type grpProducts and press the ENTER key on your keyboard.

Now, we can add commands to this group.

To add a command select Menu->Add Command
DHTML Menu Builder will add a new command and wait for you to give it a name
Type Computers and press ENTER.

When creating new items, DHTML Menu Builder will fill the Caption property automatically for you. If required you can later change both, the name and the Caption to whatever you need to. You should note though that DHTML Menu Builder will automatically remove invalid characters from the item name and change them for an underscore (_).

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

Now, let's add a special type of command, a separator.
Separators are just horizontal lines which can be used to separate commands inside the same group.

To add a separator select Menu->Add Separator
Separators do not have names so DHTML Menu Builder will not prompt you for one.

Repeat the above process to add a command and add a new one and name it Catalog_Index. Note that DHTML Menu Builder will automatically remove the space in the name and rename your entry to Catalog_Index.

Submenus, under DHTML Menu Builder are just normal groups, so to create the two submenus shown in the picture above we'll follow the exact same steps.

Create a new group and name it grpComputers and add these commands to it: High Performance, Gaming Systems and Desktop / Home.
Now let's do something interesting with the last command, Desktop / Home:

Select the command and change its Caption to: Computers for the Home<br>Desktop Systems
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.
To create a new line simply use the <br> HTML code.

Now let's create the second group that will be used as a submenu by the Accessories command. Just follow the above instructions and name the new group grpAccessories.
Add these commands to the group: Cables, Adapters, Connectors and Batteries.

Now, we need to configure the Computers and Accessories commands so when selected they display the two respective submenus we just created.
Let's configure the Computers command first.
Select the Computers command and click on the Over tab of the Actions pane.
Select the Display SubMenu action type and select the grpComputers group from the Target Group list.

What you just did is tell DHTML Menu Builder that when the mouse passes over the Computers command, the grpComputers should be displayed.

Repeat the same process to set up the Accessories command so when the mouse passes over it, the grpAccessories group is displayed.

To take a look at how your menus are working so far, select Tools->Preview and DHTML Menu Builder will generate a sample toolbar for you so you can test your project.

To finish the project let's create the last menu: Links.
Repeat what you have learned and create a group named grpLinks and add two commands to it: Search the Web and xFX JumpStart.

When creating the Desktop / Home command you learned that you can use HTML tags to format the Caption of your menu items.
DHTML Menu Builder supports the use of almost any tag in the Caption, but not all of those tags will be properly rendered by the Live Preview.
An example is the use of the <sup></sup> tags. These tags will make the text enclosed text appear superscripted.
To demonstrate this feature select the xFX JumpStart command you have just created and add the ® symbol at the end, so the Caption looks like this: xFX JumpStart®
NOTE: To add the ® symbol press and hold the ALT key and then type 0174 on your keypad.
Now, enclose the ® symbol with the <sup> tag, so the Caption looks like this: xFX JumpStart<sup>®</sup>

If you take a look at the Live Preview you will notice that the results are not what we expected, but if you preview your menus you will see that the real preview does render the tags and makes the Caption look like this: xFX JumpStart®

Now, lets make our menus look cooler!

Select the first group, grpProducts and click Menu->Color
Click the Back Color button and type these values: FF, C8 and 40 for red, green and blue respectively.
Set the border size to 2 and set the four border colors to 80, 40 and 40 for red, green and blue respectively.
Click on the OK button to close and commit the Color dialog.

Click on Menu->Margins and select 2 pixels for both the horizontal and vertical margins.

To set up the other groups with the same style settings, just make sure the prgProducts group is selected and click on Edit->Copy
Check the Color, Image and Margins checkboxes and click OK.
Now select Edit->Paste, choose the Paste to all groups option and click OK.

As easy as that you have just applied the same style changes to all the groups in the project!

This is how DHTML Menu Builder will look like after creating all the itemsNow, let's change the style of the commands.
The steps are very similar as changing the style of the groups.

Select the first command under the grpProducts group, Computers, and click on Menu->Color
For the Normal state click on the Reset button. This will assign the default settings based on the parent group's style.
For the Mouse Over state, click on the Text Color button, the click on Windows and select the White color. Now click on the Back Color button and type 80, 40 and 40 for red, green and blue respectively.

Now click on Menu->Font to set the font type, size and style of the command's Caption.
For both states select Tahoma for the font type, 11 for the size and Bold for the style.

Finally, to propagate the same style to all the commands, make sure the Computers command is selected and click on Edit->Copy
Select the Font and Color checkboxes and click OK.
Click Edit->Paste, choose the Paste to all Commands and click OK.

This should be a good time to preview your project.

Because the Computers and Accessories commands are used to display another menu, is a good idea to let the user know that by selecting them they will get another menu with more options. An easy and effective way is to add small arrows to the right of the commands' Caption.

These arrows can be small images you have created with some graphic editor or you may use the two arrows bellow:

To save the above images, just right click on the image and select Save Picture As... from the context menu.

Note that one arrow is black and the other is white. This is because the menus we have created have a light background color when the items are not selected and a dark background color when selected. Then, we'll use the black arrow for the default state of the menus and the white for when the menus are selected. This way the arrow image will always contrast with the command's background color.

You should save these images in the c:\DMB_Tutorial\images\ folder.

To set up the Computers command to use these arrow images, select the command and click Menu->Image
Click on the Change button of the Normal state, under the Right Image pane.
Click on the From File... button and select the black_arrow.gif image.
Click on the Change button of the Mouse Over state, under the Right Image pane.
Click on the From File... button and select the white_arrow.gif image.

To apply these changes to the Accessories command, select the Computers command, click on Edit->Copy and check the Image checkbox.
Now select the Accessories command, click on Edit->Paste, make sure the Paste to the command Accessories option is selected and click OK.

 


Continue »