J3.x

Difference between revisions of "Creating a submenu"

From Joomla! Documentation

Line 128: Line 128:
 
2. Click on the module name associated with your menu. In this tutorial, we are selecting "Left Menu". Note: this image has been filtered by selecting "Menu" in the Module type dropdown.
 
2. Click on the module name associated with your menu. In this tutorial, we are selecting "Left Menu". Note: this image has been filtered by selecting "Menu" in the Module type dropdown.
 
[[Image:J3x-Create-Sublevel-Menu-Module-List-Menus-2-en.png]] {{-}}
 
[[Image:J3x-Create-Sublevel-Menu-Module-List-Menus-2-en.png]] {{-}}
3. In the Modules detail, set the '''Start level''' to "2", the '''End Level''' to "All" and set '''Show Submenu Items''' to "Yes". Note the position has changed.  
+
3. In the Modules detail, set the '''Start level''' to "2", the '''End Level''' to "All" and set '''Show Submenu Items''' to "Yes". Note the position has changed and the menu we are pointing to is the '''Main Menu'''.  
 
[[Image:J3x-Create-Sublevel-Menu-Module-Details-2-en.png]] {{-}}
 
[[Image:J3x-Create-Sublevel-Menu-Module-Details-2-en.png]] {{-}}
 
4. For this tutorial, we have added some styling on the Advanced tab. In the '''Menu Class Suffix''' we have entered " navbar-nav nav-pills". You can also add " navbar-nav nav-tabs" for a slightly different look. Note: there is a space before "navbar-nav". {{-}}
 
4. For this tutorial, we have added some styling on the Advanced tab. In the '''Menu Class Suffix''' we have entered " navbar-nav nav-pills". You can also add " navbar-nav nav-tabs" for a slightly different look. Note: there is a space before "navbar-nav". {{-}}

Revision as of 12:01, 2 December 2015

Copyedit.png
This Page Needs Your Help

This page is tagged because it NEEDS REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.

Reason: Images out of date, need 3.x images.


Tutorial
How to Create a Submenu in a Joomla! Site

In Joomla!, submenus can be shown either as one menu with two or more levels or as completely separate menu modules. This is useful for constructing menus showing parent and child level navigation or for showing sublevel menu items in entirely separate positions on your template. To show how to do this, we will step through creating parent and child level menu items and then see how to show those items within one large menu and as a separate menu with only the child level items showing in a separate position on a template.

To begin, menus function with three basic constructs:

  • Articles - you need content to link to. This can also be component pieces, other menu items or external links.
  • Menu - describes the menu items, the type of navigation, their parent/child relationship to other menu items and the order they are displayed in.
  • Menu Module - controls the position and displaying of the menu.


For this tutorial, begin by logging into the Joomla Administrator. If you are unfamiliar with how to login see this article: https://docs.joomla.org/J3.x:Logging_in_or_out_of_the_Administrator_back-end.


Please note, for this tutorial you need Super Administrator privileges or privileges open enough to create and modify Articles, Menu Items, and Modules. For more information on User Access Control see this article: https://docs.joomla.org/J3.x:Access_Control_List_Tutorial

Step 1 - Create Your Articles[edit]

In our example, we will create top level menu items for "Dogs" and "Cats". Under Dogs, we will have "Collies" and "Pomeranians". Under Cats we will have "Burmese" and "Russian Blues". So the structure of the our sample menu items will be as follows:

  • Dogs
    • Collies
    • Pomeranians
  • Cats
    • Burmese
    • Russian Blues

First, create 4 articles so our menu items will have something to link to: "Collies", "Pomeranians", "Burmese" and "Russian Blue". See this tutorial if you need help creating an Article: https://docs.joomla.org/Adding_a_new_article

Step 2 - Create the Parent Level Menu Items[edit]

To create the structure, we need to navigate to the menu where we want our new menu items. If this is a new menu, you will need to create it. See this tutorial on how to create a menu: https://docs.joomla.org/J3.x:Adding_a_new_menu.

Once you have your menu located in the Menu Manager, you will add the parent menu items using the System Links → External URL for each navigation link: "Dogs" and "Cats".

Please note, there are other menu item types that can be used for the parent level navigation structure.

Here are the steps to create sample Menu Items using our example data. For more information on creating Menu Items go here: https://docs.joomla.org/Adding_a_new_menu_item

1. Navigate to the Menu Manager by clicking on Menus → Menu Manager J3x-Edit-Main-Menu-en.jpg

2. In the toolbar, click on "New" J3x-Edit-Main-Menu-Toolbar-new-en.png

3. For the purposes of this exercise we are creating "placeholder" links using the System → External URL menu type for the "Dogs" and "Cats" parent level menu items. So, in the new Menu Item click on the Menu Type select button:

J3x-Add-Main-Menu-Select-Type-en.png

4. Click on "System Links" then scroll down and select "External URL". J3x-Create-Sublevel-Menu-System-External-Url-en.png

5. Add the Menu Item Title ( "Dogs" ) and type in a hashtag "#" in the Link box. J3x-Create-Sublevel-Menu-Menu-Item-External-Url-en.png

6. Save your menu item.

Joomla-3-Menu-Add-Menu-Save-en.png

7. Repeat steps 2 - 6 for the "Cats" Parent Level menu item.

Step 3 - Create the Sublevel Menu Items[edit]

Now you will add the sublevel menu items using the Articles → Single Article to create menu links to the individual pages "Collies", "Pomeranians", "Burmese", and "Russian Blues". For each Menu Item created, we will set the Parentage to "Dogs" or "Cats".


For more detailed information on how to create a Single Article Menu Type click here: https://docs.joomla.org/Adding_a_menu_item_which_points_to_an_Article

Please note, there are other menu item types that can be used for the sublevel navigation structure.

1. In the toolbar, click on "New". J3x-Edit-Main-Menu-Toolbar-new-en.png

2. In the new Menu Item click on the Menu Type select button: J3x-Add-Main-Menu-Select-Type-en.png

3. Select Articles → Single Article from the list displayed.

J3x-Add-Main-Menu-Article-Type-en.png

4. Returning to the Menu Item Detail page, click on the Select Article List.

J3x-Add-Main-Menu-Article-Select-Article-en.png

5. Select the "Collies" article for this example.

J3x-Create-Sublevel-Menu-Menu-Item-Single-Article-en.png

6. On returning to the Article Detail page, fill in the Menu Item Title. Then click on the Parent Item select list located in the far right column. Find and select the "Dogs" parent item by scrolling through the Parent Item List. Note that menu levels are displayed with dashes: "-" (single dash) is the highest level, "--" (two dashes) is the second level, "---" third level and so on.

J3x-Create-Sublevel-Menu-Select-Parent-Item-en.png

7. Click on the button "Save and close" up in the top green buttons.

Joomla-3-Menu-Add-Menu-Save-en.png

8. Repeat steps 1-7 for the remaining articles "Pomeranians" with the "Dog" parent and articles "Burmese" and "Russian Blues" for the "Cat" parent.

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

J3x-Create-Sublevel-Menu-Items-en.png

Step 4 - Setup the Menu Module[edit]

At this point, we have our Articles and Menu Items done. Now we need to update the Menu Module. 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) which pages it will show on.
We will do two examples. In the first example, we will set the parameters that show the parent level menu items with the lower level items beneath.

In the second example, we will add an additional menu module that appears in the left column and shows only the second level menu items.
Note: We will do both examples using the Protostar Template included in the core Joomla! installation.

Example 1 - One Menu Module With Second Level Menu Items[edit]

To show this as one module, follow these steps:

1. Navigate to Extensions → Module Manager and locate the Menu Module associated with your menu. If you need to create a new menu module, click here for instructions on creating a menu module: need link

J3x-Create-Sublevel-Menu-Module-Control-Panel-en.png

2. Click on the module name associated with your menu. In this tutorial, we are selecting "Main Menu". Note: this image has been filtered by selecting "Menu" in the Module type dropdown.

J3x-Create-Sublevel-Menu-Module-List-Menus-en.png

3. In the Modules detail, set the Start level to "1", the End Level to "All" and set Show Submenu Items to "Yes".

J3x-Create-Sublevel-Menu-Module-Details-en.png

4. For this tutorial, we have added some styling on the Advanced tab. In the Menu Class Suffix we have entered " navbar-nav nav-pills". You can also add " navbar-nav nav-tabs" for a slightly different look. Note: there is a space before "navbar-nav".

J3x-Create-Sublevel-Menu-Module-Advanced-Menu-Class-Suffix-en.png

5. Click on Save and Close.

J3x-Create-Sublevel-Menu-Module-Save-en.png

6. Go to the frontend of your site and your menu should look similar to this. In the Protostar Template, the sublevel menu items are displayed as dropdown menu items.

J3x-Create-Sublevel-Menu-Frontend-Sample-Dropdown-en.png

7. The source code generated will look similar to this:

<ul class="nav menu navbar-nav nav-pills">
  <li class="item-101 current active"><a href="/" >Home</a></li>
  <li class="item-102"><a class="dropdown-toggle" href="/about-us" >About Us</a></li>
  <li class="item-210 deeper parent"><a href="#" >Dogs</a>
    <ul class="nav-child unstyled small">
      <li class="item-212"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
      <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
    </ul>
  </li>
  <li class="item-211 deeper parent"><a href="#" >Cats</a>
    <ul class="nav-child unstyled small">
      <li class="item-214"><a href="/2015-11-24-14-20-12/burmese" >Burmese </a></li>
      <li class="item-215"><a href="/2015-11-24-14-20-12/russian-blues" >Russian Blues</a></li>
    </ul>
  </li>
</ul>

Example 2 - A Second Menu Module With Child Level Menu Items[edit]

To show in a separate module in a different position, follow these steps:

1. Navigate to Extensions → Module Manager and locate or create a second Menu Module associated with your menu. If you are unfamiliar with how to create a new menu module, click here for instructions on creating a menu module: need link

J3x-Create-Sublevel-Menu-Module-Control-Panel-en.png

2. Click on the module name associated with your menu. In this tutorial, we are selecting "Left Menu". Note: this image has been filtered by selecting "Menu" in the Module type dropdown.

J3x-Create-Sublevel-Menu-Module-List-Menus-2-en.png

3. In the Modules detail, set the Start level to "2", the End Level to "All" and set Show Submenu Items to "Yes". Note the position has changed and the menu we are pointing to is the Main Menu.

J3x-Create-Sublevel-Menu-Module-Details-2-en.png

4. For this tutorial, we have added some styling on the Advanced tab. In the Menu Class Suffix we have entered " navbar-nav nav-pills". You can also add " navbar-nav nav-tabs" for a slightly different look. Note: there is a space before "navbar-nav".

J3x-Create-Sublevel-Menu-Module-Advanced-Menu-Class-Suffix-en.png

5. Click on Save and Close.

J3x-Create-Sublevel-Menu-Module-Save-en.png

6. Go to the frontend of your site and your menu should look similar to this. In the Protostar Template, the sublevel menu items are displayed as dropdown menu items.

J3x-Create-Sublevel-Menu-Frontend-Sample-Dropdown-en.png

7. The source code generated will look similar to this:

<ul class="nav menu">
  <li class="item-212 current active"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
  <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
</ul>


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

Submenu example3-en.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-en.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[edit]

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-en.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-en.png

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

Sub-Sub-Menus[edit]

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.