Actions

J3.x

Difference between revisions of "Creating a submenu"

From Joomla! Documentation

m (Menu and Menu Items: Tidied up mistakes in my editing. Started using Preview at last!!)
m (Separate Menu Modules: end level needs to be 1 even though start level is also 1)
 
(18 intermediate revisions by 2 users not shown)
Line 14: Line 14:
  
 
Here are the steps to create the Menu and Menu Items.
 
Here are the steps to create the Menu and Menu Items.
# Create [http://docs.joomla.org/J3.2:Adding_a_new_menu a new Menu] in the Menu Manager called "Pets".  
+
# '''Menus → Menu Manager'''
# Add a new [http://docs.joomla.org/Adding_a_new_menu_item Menu Item] called "Dogs". For this example, we don't really care what the type of the "Menu Item"(s) are! <br />So, for this example you can just [http://docs.joomla.org/Adding_a_new_article create one article] called "Pet Menu Test" and then create all of the Menu Items as type '''Article &rarr; Article Layout''' and with all of them pointing to that one article.
+
# Create [[J3.2:Adding_a_new_menu|a "new" Menu]] in the Menu Manager called "Pets".
# Add a second Menu Item called "Collies" (again, Menu Type of Article Layout as above). In the Parent Item box, select "Dogs", nearly as shown below: [[Image:submenu_example1.png|frame|center]]<br />The screenshot is from a previous version of Joomla but 3.2 is very similar.  The "Parent Item" option is the 2nd item over in the right-hand column in 3.2.
+
# For the purposes of this exercise it might be easier to create a single article to point all the "Menu Items" at.{{-}} So, [[Adding_a_new_article|create one article]] called "Pet Menu Test".
 +
# Add a new [[Adding_a_new_menu_item|Menu Item]] called "Dogs". For this example, we don't really care what the "Menu Item Type"(s) are! <br />Just for the purposes of this exercise it might be easiest to set their "Menu Item Type" as '''Articles &rarr; Single Article''' {{-}}Then the "Select Article" field appears.  Click the "Select" button and navigate to "Pet Menu Test". 
 +
# Use the "Menu Location" drop-down to put the "Menu Item" in "Pets"
 +
# Click on the button "Save and close" up in the top green buttons.
 +
# Add a second Menu Item called "Collies" (again, Menu Type of Article Layout as above). In the Parent Item box, select "Dogs", nearly as shown below:{{-}}[[Image:submenu_example1.png|frame|center]]{{-}}The screenshot is from a previous version of Joomla but 3.2 is very similar.  The "Parent Item" option is the 2nd item over in the right-hand column in 3.2.
 
# Add a third Menu Item called "Greyhounds", again making "Dogs" the Parent Item. (Remember, these can all point to the same article.)
 
# Add a third Menu Item called "Greyhounds", again making "Dogs" the Parent Item. (Remember, these can all point to the same article.)
# Add the "Cats" Menu Item. Be sure to make the Parent Item for this "Top".
+
# Add the "Cats" Menu Item. Be sure to make the Parent Item for this "Top" or "Menu Item Root".
 
# Add the last two Menu Items, "Tabbies" and "Siamese", making "Cats" the Parent Item for both.
 
# Add the last two Menu Items, "Tabbies" and "Siamese", making "Cats" the Parent Item for both.
  
When you are finished with that part, the Menu Item Manager should look very similar to the following:[[Image:submenu_example2.png|frame|center]] Again it's a little different in 3.2 as we don't get the numbers in the far left column in 3.2.
+
When you are finished with the "Menu Items" section, the Menu Item Manager should look very similar to the following:{{-}}[[Image:submenu_example2.png|frame|center]]{{-}} Again it's a little different in 3.2 as we don't get the numbers in the far left column in 3.2.
  
 
==Menu Modules==
 
==Menu Modules==
At this point, we've got the [http://docs.joomla.org/J3.2:Adding_a_new_menu Menu] and [http://docs.joomla.org/Adding_a_new_menu_item Menu Item] 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. In the first example, we will create [Creating_a_submenu#One_Menu_Module one Menu Module] that shows all of the items in one menu. In the second, we will create three [Creating_a_submenu#Separate_Menu_Modules separate menu modules] to show the Pets, Dogs, and Cats menus as separate modules.
+
At this point, we've got the [http://docs.joomla.org/J3.2:Adding_a_new_menu Menu] and [http://docs.joomla.org/Adding_a_new_menu_item Menu Items] done. Now we need to create the Menu Modules. In Joomla!, the Menu Module determines three main things: a) what the menu looks like; b) where on the page it will show; and c) on which pages it will show. <br />We will do two examples. In the first example, we will create [http://docs.joomla.org/J3.2:Creating_a_submenu#One_Menu_Module one Menu Module] that shows all of the items in one menu. In the second, we will create three [http://docs.joomla.org/J3.2:Creating_a_submenu#Separate_Menu_Modules separate menu modules] to show the Pets, Dogs, and Cats menus as separate modules.
  
===One Menu Module===
+
===One Menu Module===
 
To show this as one module, follow these steps:
 
To show this as one module, follow these steps:
# Navigate to Extensions &rarr; Module Manager, click the "New" icon in the toolbar, and select "Menu".
+
# Navigate to <br />Extensions &rarr; Module Manager, <br />click the "New" icon in the toolbar, and select "Menu".
 
# Enter the Title as "Pets Menu" and Position as "left".  (Left top, )
 
# Enter the Title as "Pets Menu" and Position as "left".  (Left top, )
<!--  # 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".  # Commented-out as it doesn't seem to exist in J3.2 -->
+
<!--  # 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".  # Commented-out as it doesn't seem to exist in J3.2 -->
# In Menu Name, select "pets-menu" from the drop-down list box.  
+
# In "Select Menu" select "Pets" from the drop-down list.  
# 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.
+
# 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.
 +
# By the "Show Sub-menu Items" click on the "No" button. 
  
Now, navigate to the front-end home page. You should see the Pets Menu as shown below:[[Image:submenu_example3.png|frame|center]]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".   
+
Now, navigate to the front-end home page or refresh/reload it. You should see the Pets Menu as shown below:[[Image:submenu_example3.png|frame|center]]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 the default in "Show Sub-menu Items" was to always show sub-menu items. We changed it to "show off".   
  
 
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: [[Image:submenu_example4.png|frame|center]]
 
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: [[Image:submenu_example4.png|frame|center]]
Line 46: Line 51:
  
 
To do this:
 
To do this:
# Open the Pets Menu in the Module Manager and change the Title to "Pets Menu Top Level Only".
+
# Open the Pets Menu in the Module Manager and change the Title from "Pets Menu" to "Pets Menu Top Level Only".
# Select the Left Position.
+
# Select the Left Top Position (position 7).
# Under Module Parameters, select the Menu Name "Pets Menu"
+
# Under the Module tab "Select Menu" drop-down to "Pets" or "Pets Menu"
# Under Module Parameters, change the Menu Style to "List".
+
# Set the Start Level to "1" and the End Level also to "1".
# Set the Start Level to "0" and the End Level to "1".
+
 
# ''This is optional. It allows your template to apply special a menu style to the menu (a border, for example).'' In Advanced Module Parameters put "_menu" in Module Class Suffix.
 
# ''This is optional. It allows your template to apply special a menu style to the menu (a border, for example).'' In Advanced Module Parameters put "_menu" in Module Class Suffix.
# For submenu Dog, in extensions menu select Module Manager, click New and select Menu, and set the title to "Dogs Submenu".
+
# For sub-menu "Dog", (in extensions menu select Module Manager (if you are not already there!)), click New and select Menu, and set the title to "Dogs Submenu".
# Set the Position to "Left".
+
# Set the Position to "Left top [position-7]".
 
# ''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: [[Image:submenu_example5.png|frame|center]]
 
# ''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: [[Image:submenu_example5.png|frame|center]]
# Under Module Parameters, select the menu name "Pets Menu" and change the Menu Style to "List".
+
# Under the "Module" tab, select the menu name "Pets Menu".
# Set the Start Level to "1" and End Level "2".
+
# Set the Start Level to "1" and End Level also to "1" again.  Try 2 for a spot of weirdness.
 
# ''This is optional.'' In Advanced Module Parameters, set Module Class Suffix to "_menu".
 
# ''This is optional.'' In Advanced Module Parameters, set Module Class Suffix to "_menu".
# For the "Cats Submenu", repeat steps from 7 to 12 except step 9. In the Menu Assignment box, select the items "Cat", "Tabbies" and "Siamese" (so this menu will only show under these Menu Items).
+
# For the "Cats Submenu", repeat steps from 7 to 12 except step 8. In the Menu Assignment box, select the items "Cat", "Tabbies" and "Siamese" (so this menu will only show under these Menu Items).
  
 
At this point, we have three menu modules all pointing to the Pets Menu. The only differences between them are (1) the Start and End Levels and (2) the Menu Item Assignment.  
 
At this point, we have three menu modules all pointing to the Pets Menu. The only differences between them are (1) the Start and End Levels and (2) the Menu Item Assignment.  
Line 66: Line 70:
 
Click on the Collies Menu Item and notice that again the Breadcrumbs shows the hierarchy of "Home", "Dogs", and "Collies".
 
Click on the Collies Menu Item and notice that again the Breadcrumbs shows the hierarchy of "Home", "Dogs", and "Collies".
  
Using this same technique, it is easy to create third-level submenus. You just make the Parent Menu Item a second-level submenu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.
+
==Sub-Sub-Menus==
 +
Using this same technique, it is easy to create third-level sub-menus. You just make the Parent Menu Item a second-level sub-menu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.
  
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Menu Management]]
 
[[Category:Menu Management]]

Latest revision as of 13:25, 5 March 2014

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.

Contents

Sample 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. Menus → Menu Manager
  2. Create a "new" Menu in the Menu Manager called "Pets".
  3. For the purposes of this exercise it might be easier to create a single article to point all the "Menu Items" at.
    So, create one article called "Pet Menu Test".
  4. Add a new Menu Item called "Dogs". For this example, we don't really care what the "Menu Item Type"(s) are!
    Just for the purposes of this exercise it might be easiest to set their "Menu Item Type" as Articles → Single Article
    Then the "Select Article" field appears. Click the "Select" button and navigate to "Pet Menu Test".
  5. Use the "Menu Location" drop-down to put the "Menu Item" in "Pets"
  6. Click on the button "Save and close" up in the top green buttons.
  7. Add a second Menu Item called "Collies" (again, Menu Type of Article Layout as above). In the Parent Item box, select "Dogs", nearly as shown below:
    Submenu example1.png
    The screenshot is from a previous version of Joomla but 3.2 is very similar. The "Parent Item" option is the 2nd item over in the right-hand column in 3.2.
  8. Add a third Menu Item called "Greyhounds", again making "Dogs" the Parent Item. (Remember, these can all point to the same article.)
  9. Add the "Cats" Menu Item. Be sure to make the Parent Item for this "Top" or "Menu Item Root".
  10. Add the last two Menu Items, "Tabbies" and "Siamese", making "Cats" the Parent Item for both.

When you are finished with the "Menu Items" section, the Menu Item Manager should look very similar to the following:

Submenu example2.png

Again it's a little different in 3.2 as we don't get the numbers in the far left column in 3.2.

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: a) what the menu looks like; b) where on the page it will show; and c) on which pages it will show.
We will do two examples. In the first example, we will create one Menu Module that shows all of the items in one menu. In the second, we will create three separate menu 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". (Left top, )
  3. In "Select Menu" select "Pets" from the drop-down list.
  4. 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.
  5. By the "Show Sub-menu Items" click on the "No" button.

Now, navigate to the front-end home page or refresh/reload it. 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 the default in "Show Sub-menu Items" was to always show sub-menu items. We changed it to "show off". 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).

Note: Make sure that your Menu Items each have a unique Alias value. If you use the Copy command in the toolbar of the Menu Item Manager to create these Menu Items, the Alias will be the same as the item being copied. In this case, just edit the Alias value to make it unique (for example, the same as the Title). If you have duplicate Alias values, the menus will not work correctly if the parameter SEF URLs is set to Yes in Global Configuration.

To do this:

  1. Open the Pets Menu in the Module Manager and change the Title from "Pets Menu" to "Pets Menu Top Level Only".
  2. Select the Left Top Position (position 7).
  3. Under the Module tab "Select Menu" drop-down to "Pets" or "Pets Menu"
  4. Set the Start Level to "1" and the End Level also to "1".
  5. This is optional. It allows your template to apply special a menu style to the menu (a border, for example). In Advanced Module Parameters put "_menu" in Module Class Suffix.
  6. For sub-menu "Dog", (in extensions menu select Module Manager (if you are not already there!)), click New and select Menu, and set the title to "Dogs Submenu".
  7. Set the Position to "Left top [position-7]".
  8. 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
  9. Under the "Module" tab, select the menu name "Pets Menu".
  10. Set the Start Level to "1" and End Level also to "1" again. Try 2 for a spot of weirdness.
  11. This is optional. In Advanced Module Parameters, set Module Class Suffix to "_menu".
  12. For the "Cats Submenu", repeat steps from 7 to 12 except step 8. In the Menu Assignment box, select the items "Cat", "Tabbies" and "Siamese" (so this menu will only show under these Menu Items).

At this point, we have three menu modules all pointing to the Pets Menu. The only differences between them are (1) the Start and End Levels and (2) the Menu Item Assignment.

Now, in the front end, navigate to the Home page. The "Pets Menu Top Level Only" menu should show. Select the "Dogs" Menu Item. Now, the "Dogs Submenu" should show as a separate menu, as shown below:

Submenu example7.png

Click on the Collies Menu Item and notice that again the Breadcrumbs shows the hierarchy of "Home", "Dogs", and "Collies".

Sub-Sub-Menus

Using this same technique, it is easy to create third-level sub-menus. You just make the Parent Menu Item a second-level sub-menu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.