Creating a sample menu in DHTML Menu Module Creator for Joomla

 

In this tutorial you will learn how to create a menu module in DHTML Menu Module Creator. In the program, you will create a menu structure, choose its appearance and generate the Joomla 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 from the Joomla default website main menu.

 

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 Joomla! Overview and assign it an appropriate URL. Next, click the placeholder below Joomla! Overview and enter What's New in 1.5?. Finally, add two more elements: About Joomla! and The News.

 

 

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. Select the XtreemeSite design and 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

 

 

 

Creating the Joomla menu module.

 

8. Now it's time to create the Joomla module file. Next, the module will be installed in the Joomla system. Click the Save button located at the bottom of the main window. In the Save dialog that opens, choose location and name of the module file (e.g. dhtmlmenu.zip). Note that the file should have the .zip extension.

 

This will create, in the chosen location, a .zip file that contains the mod_xtreeme_dhtmlmenu module with your menu.

 

 

Installing the menu module in Joomla.

 

9. Once logged in to Joomla administrator panel, choose Extensions / Install-Uninstall from the main menu. On the page, select the previously saved menu module file (dhtmlmenu.zip) and install it.

 

10. Now you need to enable the module. Go to the Module Manager (choose Extensions / Module Manager from the main menu) and click the newly installed DHTML Menu module to edit it.

 

11. On the Edit page (the picture below), enable the module by selecting Yes in the Enabled field. Also, make sure that Show Title is set to No. In the Position drop-down you can choose where the menu should appear on your website.

 

12. When you are done, click Save to apply the changes.

 

 

tutorial1-6

 

 

 

13. Now, open the home page. Move the mouse cursor over the Joomla! Overview element to expand the pop-up.

 

 

tutorial1-7