In the previous article, we installed the RocNavMenu and set some basic parameters with the Template Edit screen. In this article, we will finish configuring the menu with the Main Menu, Menu Item Manager. From the Administrator Control Panel, go to Menu, Main Menu. To see the parameters for the RokNavMenu, click on any existing menu item or click NEW to create a new one:

 

For Select Menu Type, click on the type of menu item you are editing or adding. For articles, this is generally the “Articles” type (followed by clicking on Article Layout). However, for strange content such as modules and module positions, you can click on Separator to create a unique menu item.

Either way, you will bring up the Menu Item – EDIT page which will also have the RokNavMenu Parameters Control Panel shown on the right side of the page. 

 

This is where you can decide what menu options you would like and set the title and parent item for your menu item.

 

How to create Child / Sublevel menu items in Joomla

You first have to create a menu item to be a parent in the Top Main Menu. There are two ways to do this. If you have a new article and you are creating a menu link, then simple create a normal Article Layout Menu Item. You can sent the Fusion parameters at the same time that you set the parent item and menu link to the article. First, use Parameters – Basic to select the article to be linked to the menu item:

 

Then click Parameters Template Theme Gantry Fusion to set the Fusion parameters:

 

Then click on APPLY, then PREVIEW to see the result:

 

The second way is to add existing menu items in your main menu to your fusion menu by simply clicking on the menu items to edit them.

In order for menu dropdowns to appear, you need to setup parent and child menu items.

From the Joomla Administrator Control Panel, go to Menus → Main Menu and select a menu item that you wish to be in the child menu item in the dropdown. Click on EDIT to bring up the Menu Item Edit Screen. Then locate the Parent Item form.

 

Select the parent menu item that you wish for your item to appear under. In the above example, the Test Article is the CHILD and NEWS FEEDS is the parent. Then save the child menu item. Perform the same task for all menu items that you wish to be child items.

The Gantry Fusion Control Panel

 

Go to the Main Menu, Menu Item Manager and click on the Main Menu Item you want to edit. This brings up the Menu Item Edit screen.

 

In the Menu Item Edit Screen, click on Parameters – Template theme - Gantry Fusion.

This brings up the Fusion Control Panel:

 

Setting the Drop Down Width of a Main Menu Item

Unlike most Joomla menu systems, the RocNavMenu allows you to set different drop down column widths for each individual menu item in the main menu. This is very useful if some of your sub-menu items have longer titles than others.

Also the width of any menu item is easily reset inside of the Menu Item Manager, which is far better than most menu systems (which can only change width by changing the CSS sheets).

To change the width of the drop down column below a main menu item, go to the Main Menu, Menu Item Manager and click on the Main Menu Item you want to edit. This brings up the Menu Item Edit screen.

To reach the Gantry Fusion control panel, which controls the RocNavMenu, click on Parameters Template Theme Gantry Fusion.

 

The Main Menu Item may already have a predefined menu width. In this case, it is set for 220 pixels. This is so narrow that even short sub-menu items take up two lines, which can be confusing for viewers – especially if there are several sub-menu items. Change the Drop Down width to 300 and the column width to 300, then click APPLY, and then click PREVIEW to see if this is a better width. If it is, then click SAVE.

 

Adding Subtext with the Subtext Line

Subtext Lineis the option that allows you to insert additional text underneath the Menu Item Title. There is separate styling for this, making it useful for adding brief descriptions to menu items. You can add Sub text to Top Menu items by clicking on theme. But this may create a confusing Main Menu. So Sub Text is usually used to add a description to Second and Third Level children of the Top Menu parent item.

 

Typing in Example Subtext above when the Installation child menu item is selected, results in the following subtext being placed below the word Installation:

Adding Menu Icons with the Menu Image

The Menu Image Selector in the upper right corner allows you to insert an icon or any other image into any menu item. The Fusion Menu comes with 21 pre-loaded icons. To add more, use a file manager and go to the templates/your_template/images/icons folder. Icons are usually very small – less than 100 px by 100 px. However, you can add larger images as long as they are loaded into the template/images/icon folder first.

To add an icon to your menu items, first select the menu item you want to edit with the menu item manager to open it. Then click on the Fusion Control Panel for this item.

Menu Imageis the option that allows you to insert an inline icon / image to the Menu Item.

Use the drop down arrow to select the icon you want.

 

Selecting the arrown.png image above results in the green check arrow image being added to the child menu item below:

Using the Column Selector to Create Multiple Dropdown Columns

Columns of Child Itemsallows you to determine how many columns the Fusion dropdowns are presented in.

 

You can have anywhere between a single dropdown to a four column dropdown. This is probably the most important feature of the Fusion menu as each top menu item can have 20 or more sub-menu children.

 

Examples of 1, 2, 3 and 4 Column Drop Downs

Defining Item Distribution Options

Item Distributionallows you to control how the menu items are ordered in the dropdowns. There are two options, Evenly and Order. .

Evenly: If there are 7 menu items in 3 columns, Fusion will allocate a 3,2,2 distribution - trying to equalize each dropdown.

In Order: If there are 7 menu items in 3 columns, Fusion will allocate a 3,3,1 distribution - maintaining the item ordering.

NOTE:If your Columns of Child Items setting is configured to be 2 or more columns, you will need to manually set the column widths and distribution, as outlined below, in the section on Column Width. The default Drop Down Width is 180px which is too small for multiple columns.

Drop-Down Width (px)

Drop-Down Width (px)determines the total width of the dropdown, regardless of how many columns are shown. This option is to be used in conjunction with Column Widths (px)

Column Widths (px)

Column Widths (px)determines the width of each Column. Separate each width by a comma. The final column's width is determined automatically. This option is to be used in conjunction with Drop-Down Width (px). Below are some example configurations:

Example 1: Drop-Down Width: 480px:160,160. Fusion automatically calculates the final width as 160, so in practice, 160,160,160 is the actual distribution.

Example 2: Drop-Down Width: 600px:160,160. Fusion automatically calculates the final width as 280, so in practice, 160,160,280 is the actual distribution.

Grouping Child Items

You can either group or not group child menu items. Group Child Items changes the behavior of child items in the dropdown menus, instead of creating a dropdown for the immediate sublevel, this option places them inline. See below for an illustrated example of the differences:

NOTE: Grouping cannot be applied to root or top level menu items, only child items – which are menu items which have been assigned to top level or parent items.

Set Group Child Items to Yes to activate the mode. The sublevels well then appear below the parent menu item in a categorical type structure.

 

Below is a diagram of how the menu groupings in Joomla translate into the Fusion Menu:

In the above example, Extensions is a Top Level or Parent Menu Item. Styled Extensions and Included Extensions are second level Menu Items – in that they are children of the Top Level Menu Item, but they are parents of the remaining 10 menu items – all 10 of which are Third Level Menu Items and children of either the Styled Extension Menu Item or the Included Extensions Menu Item. The Groups are determined by putting menu items as children of Second Level Menu items.

Dynamic Child Direction

Typically, a dropdown menu column will extend beyond the width of the browser window if you have enough child levels. However, with Fusion, the menu detects the width of the browser and will change the direction of menu pullouts so all menu items are visible without the need to scroll.

In the next article, we will discuss how to put entire modules in your drop down menus.