Creating a sample menu in DHTML Menu Module Creator for Drupal

 

In this tutorial you will learn how to create a menu in DHTML Menu Module Creator. In the program, you will create a menu structure, choose its appearance and generate the Drupal menu module.

 

 

Creating the menu structure

 

First, you need to create a structure of your menu. When creating the structure, you add elements that will be visible in the top-level menu bar and the pop-ups. You can do this in the Structure tab of the main program window (see the picture below).

 

Let's add a few items of a sample web site.

 

1. Open DHTML Menu Module Creator and go to the Structure tab. Next, click the menu item placeholder in the Menu Editor panel and type Home. You have just added the first menu item!

 

2. Then, go to the Destination URL field in the section on the right and type the URL for the Home item, let's say './'. This way, once a visitor to your website clicks this item, they will be redirected to the home page.

 

 

tutorial1-1

 

 

 

3. Let's add a few more menu items. Click the placeholder to the right from Home, type My Articles and assign it an appropriate path, e.g. node/1. Next, click the placeholder below My Articles and enter Food Recipes. Finally, add two more elements to the My Articles pop-up, Save Driving and Exercise Myths, and two more top-level elements, My Photos and About Me.

 

 

tutorial1-2

 

 

 

Choosing appearance

 

4. Now it's time to choose the menu look. You can do this in the Appearance tab. As you can see in the preview panel, the menu is now using the default design.

 

 

tutorial1-3

 

 

5. Let's use one of the predefined menu designs. Click the Choose Skin... button located on the left panel. The Design Gallery window opens (see the picture below). In the gallery you can view all menu designs currently available on your machine.

 

 

tutorial1-4

 

 

6. Let's select the Sky design. Next, click Use at the bottom of the window to apply the selection.

 

7. As you can see in the picture below, the chosen design was applied to the menu.

 

Note that in the properties panel on the left you can find a number of options that control the appearance and behavior of the menu. You can use these options to customize your menu even more.

 

 

tutorial1-5

 

 

 

Saving the Drupal menu module.

 

8. Now it's time to create the Drupal module. Next the module can be copied to the Drupal modules folder. Click the Save button located at the bottom of the main window. In the Save dialog that opens, choose the folder where the menu module (xtreeme_dhtmlmenu) will be created.

 

 

 

Using the menu module in Drupal.

 

9. Copy the generated xtreeme_dhtmlmenu module folder to sites/all/modules inside your Drupal main folder. Make sure the directory has read permissions for all users.

 

10. Next, go to Administer / Site building / Modules, enable the DHTML Menu module and save the configuration.

 

 

tutorial1-6

 

 

 

11. Now you need to choose a region where the menu will be shown. Go to Administer / Site building / Blocks and drag-and-drop the DHTML Menu block to the region of your choice. Then, click the Save blocks button to apply changes.

 

In the picture below, the menu is assigned to a custom region, Navigation.

 

tutorial1-7

 

 

Viewing the result.

 

12. Now, open the home page to view the menu. Move the mouse cursor over the My Articles element to expand the pop-up.

 

 

tutorial1-8