Creating a submenu

From Joomla! Documentation

Revision as of 21:21, 17 November 2008 by Dextercowley (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

In Joomla!, submenus can be shown either as one menu with two or more levels or as completely separate menu modules. To show how to do this, we will step through creating a two-level menu and then see how to show it either as one large menu or as separate parent and child menus.

Example Data

In our example, we will create a menu called "Pets". It will have two top-level menu items called "Dogs" and "Cats". Under Dogs, we will have "Collies" and "Greyhounds". Under Cats we will have "Tabbies" and "Siamese". So the structure of the Pets menu will be as follows:

  • Dogs
    • Collies
    • Greyhounds
  • Cats
    • Tabbies
    • Siamese

Menu and Menu Items

To create this structure, we create one menu with two levels of Menu Items. Note that we do this whether we want to have everything shown as one large menu or whether we want to create separate menu modules (one parent menu and two child menus). We'll see how to do this later on, when we create the modules.

Here are the steps to create the Menu and Menu Items.

  1. Create a new Menu in the Menu Manager called "Pets".
  2. Add a new Menu Item called "Dogs". For this example, we don't really care what the type of the Menu Items is. For example, you can just create one article called "Pet Menu Test" and then create all of the Menu Items as type Article → Article Layout and point to this article.
  3. Add a second Menu Item called "Collies" (again, Menu Type of Article Layout as above). In the Parent Item box, select "Dogs", as shown below:
    Submenu example1.png
  4. Add a third Menu Item called "Greyhounds", again making "Dogs" the Parent Item. (Remember, these can all point to the same article.)
  5. Add the "Cats" Menu Item. Be sure to make the Parent Item for this "Top".
  6. Add the last two Menu Items, "Tabbies" and "Siamese", making "Cats" the Parent Item for both.

When you get done, the Menu Item Manager should look like the following:

Submenu example2.png

Menu Modules

At this point, we've got the Menu and Menu Items done. Now we need to create the Menu Modules. In Joomla!, the Menu Module determines three main things: (1) what the menu looks like; (2) where on the page it will show; and (3) on which pages it will show. We will do two examples, one with one Menu Module and one with three separate modules to show the Pets, Dogs, and Cats menus as separate modules.

One Menu Module

To show this as one module, follow these steps:

  1. Navigate to Extensions → Module Manager, click the "New" icon in the toolbar, and select "Menu".
  2. Enter the Title as "Pets Menu" and Position as "left".
  3. In the Menu Assignment, enter "Select Menu Item(s) from the List" and select "Home" (under "mainmenu"), and all of the Menu Items under the "pets-menu".
  4. In Menu Name, select "pets-menu" from the drop-down list box.
  5. If you are using the default "rhuk_milkyway" template and want the menu to look like the other menus, in the Advanced Parameters enter "_menu" for Module Class Suffix.

Now, navigate to the front-end home page. You should see the Pets Menu as shown below:

Submenu example3.png

Click on the Dogs Menu Item. The selected article displays and the Dogs menu expands to show the two submenu items, Collies and Greyhounds. Note that we can set a parameter in the Module Manager to always show submenu items. Here we have taken the default value of "No". Click on "Collies" and again the article changes. (Or it would if we had different articles for each Menu Item!) The screen should look like the one below:

Submenu example4.png

Notice that the Breadcrumbs now shows three levels: Home, Dogs, Collies. Because we used submenus, Joomla! "knows" that Collies is under Dogs.

Separate Menu Modules

Now we will change our example to create three separate menus -- one for the top level (Dogs and Cats), one for the Dogs (Collies and Greyhounds), and one for the Cats (Tabbies and Siamese). To do this:

  1. Open the Pets Menu in the Module Manager and change the Title to "Pets Menu Top Level Only" and change the parameter called "End Level" to 1. This means that this module will only display the first level (top level) of menu items for this menu.
  2. From the Module Manager, create a new Menu Module by clicking the New icon. Set the Title to "Dogs Submenu".
  3. Now this part is very important. We only want this submenu to show when we are in one of the Dogs Menu Items. So, in the Menu Assignment box, select the three items Dogs, Collies, and Greyhounds, as shown below:
    Submenu example5.png