Introduced in version 4.20.010, DHTML Menu Builder now includes a new and powerful AddIn that will let you create multi-column menus such as those seen at Amazon.com

By default, DHTML Menu Builder does not support multi-column menus but thanks for the ShowMultipleToolbars AddIn, you can easily create multi-column menus by displaying a series of toolbars, one next to the other, giving the illusion of a multi-column menu.

So, the first thing you must do is to create all the toolbars that will be displayed as the columns of your multi-column menu.
As you can see on the image at the right, the project used to create the above menus contains a series of toolbars where each one of them is used as a column.

When creating toolbars that will be used as columns you must make sure that the toolbars' style is set to "Vertical" (Tools->Toolbars Editor->Appearance).
The "Alignment" setting for the toolbars is irrelevant since their position will be automatically calculated by the AddIn.

Once you have created all the toolbars you just need to setup an item so that when the mouse is moved over it, it displays the toolbars in the form of a multi-column menu.
This is done by calling a special javascript function which is provided by the AddIn:

• Select the menu item that want to use to trigger the multi-column menu
• Select the "Over" event and set its "Action Type" to "Open URL / Execute Script"

• Now, type the following code inside the "URL / Script" textbox (this is where you would normally type the menu item's link):

What this code does is call the ShowToolbars() function and specify which toolbars should be used as columns. In this case, we want to display the toolbars number 1, 2, 3 and 4 as part of the multi-column menu.

The ShowToolbars() function also supports an advanced parameter that you can use to further customize the location and appearance of the multi-column menu. For example, consider this code, which is the actual code used in the Amazon menus sample:

As you can see, this version contains an additional parameter: [0, 10, 0, '1px solid #444444']

Each of the values inside this parameter have their own purpose:

• The first two values (0, 10) specify, respectively, the horizontal and vertical margins. In this case, we are applying a 10 pixels margin so the multi-column menu will be displayed 10 pixels downwards from the menu item that triggered them.
• The third value (0), specifies the alignment of the multi-column menu in relationship to the menu item that triggered it. This value can be any number form 0 to 11 and each value specifies a different alignment option:

  0 Bottom/Left
  1 Bottom/Right
  2 Top/Left
  3 Top/Right
  4 Left/Top
  5 Left/Bottom
  6 Right/Top
  7 Right/Bottom
  8 Center/Left
  9 Center/Right
  10 Center/Top
  11 Center/Bottom

• And, finally, the fourth value ('1px solid #444444') appears enclosed within single quotes and is the responsible for specifying the border style of the multi-column menu.

  Multi-column AddIn and the Amazon Menus Sample (58 KB)

If you would like to see a more complex example, please refer to the "I dare you..." section of the public forums.