Joomla/C2/Menus-in-Joomla/English
Visual Cue | Narration |
Show Slide 1:
Understanding Menus in Joomla. |
Welcome to the Spoken Tutorial on Understanding menus in Joomla. |
Show Slide 2
Learning Objectives: Same as narration |
In this tutorial, we will learn about:
|
Show Slide 3
Learning Objectives continued: Same as narration |
We will also learn how to:
|
Show Slide 4
Versions and OS |
For this tutorial, we will be using:
|
Show Slide 5
Prerequisites |
To follow this tutorial:
|
Open the browser with Digital India homepage. http://localhost/joomla | Let’s go to our Digital India webpage to understand more about menus. |
Highlight Main Menu | On the right of the Homepage, there is a box which says "Main Menu". |
Highlight Home | It currently has only one menu, "Home".
By default, this is the only menu available in Joomla. |
Menus are a way to help us navigate the website. Every menu has a set of menu items.
| |
Click on Vitamin A.
Click on category link Vitamins |
Every menu item defines a URL to a webpage.
|
Switch to the browser with Joomla Control Panel open. | Let’s switch to the Joomla control panel. |
Click on Menu Manager.
Click on Menus → Hover over Menu Manager |
Click on Menu Manager in the left menu.
|
Highlight Main Menu | By default, we have one menu called Main Menu. |
Click on Main Menu. | Click on the title Main Menu.
We can see the menu items associated with this menu.
|
Let’s create a menu item which will point to our article "Benefits of Nutrients". | |
Click on New. | Click on the New button in the toolbar. |
Highlight Menu Item Type.
Point to various options. |
Menu Item Type field decides the type of page to be shown, when we click on that menu item.
|
Click on Select. | Click on Select button next to the Menu Item Type.
A new window opens. |
Click on Articles → Single Article | Click on Articles in the new window.
We can see a list of options under Articles. Click on Single Article. |
Highlight Select Article. | Depending on the Menu Item Type, some new parameters may be required.
|
Click on Select. | This is a mandatory field. Click on Select button next to this field. |
Highlight Search text box. | A new window opens with a complete list of articles.
|
Highlight filters. | It also has filters to narrow down the list of articles visible in the window. |
Click on Benefits of Nutrients.
|
Let’s select the article Benefits of Nutrients. |
For now, we will keep the default settings in all the other fields in this window. | |
Write Single Article – Nutrients in the ‘Menu Title’ field | Right on the top, we have the Menu Title field.
This is a mandatory field.
|
Click on Save and Close. | Click on Save and Close. |
Switch to Digital India webpage. Press F5. | Switch to Digital India webpage and refresh it. |
Click on Single Article – Nutrients | Notice the new menu item link. Click on it. |
We can see the article Benefits of Nutrients is displayed here. | |
Click on Digital India. | Click on Digital India at the top left to go back to the Homepage. |
Switch to Menu Manager webpage. | Switch to the Menu Manager webpage. |
Click on Single Article – Nutrients | Let's change the Single Article-Nutrients menu item to List of categories.
|
Click on Select. | Click on the Select next to Menu Item Type. |
Click on Articles -> List all Categories | In the new pop-up window, click on Articles and then on List All Categories. |
We are back to the Menu manager window. | |
Highlight Select a Top Level Category. | Notice now that a new field appears.
It requires us to select the Top Level Category.
By default, it is Root. |
We will leave all the other fields as they are. | |
Select Single Article - Nutrients. Delete it.
Type Multiple Categories. |
But we will change the menu title to Multiple Categories. |
Click on Save and Close. | Click on Save and Close. |
Switch to Digital India webpage. Press F5. | Switch to the Digital India webpage and refresh it. |
Click on Multiple Categories. | In the Main Menu, click on Multiple Categories. |
Highlight Nutrients and Food Sources. | Notice that two of our categories Nutrients and Food Sources are shown on the top left of the webpage. |
Highlight the numbers. | The numbers next to the category indicate the number of articles under that category. |
Also, notice that the category Uncategorized is not shown here.
That is because it has neither any article nor any subcategory assigned to it. | |
Click on Nutrients.
Scroll down to see the article and sub-categories. |
Click on Nutrients link.
The article Benefits of Nutrients and subcategories Vitamins and Minerals are shown up. |
Click on Digital India. | Click on Digital India link at the top left to go back to the Homepage |
Slide:
Menu Tree |
A menu item can have sub-menus, similar to how a category can have sub-categories. |
Switch to Menu Manager webpage. | Switch to the Menu Manager webpage. |
Let's create a submenu under Multiple Categories. | |
Click on New. | On the Menu Items page, click on New button. |
Click on Select → Articles → Category List | Click the Select button next to Menu Item Type and then on Articles.
Select Category List. This will display a list of articles in a category. |
A new field Choose a Category appears. | |
Select Nutrients in the drop-down Choose a Category. | By default, the selected category is Uncategorised.
Let's select Nutrients in the drop-down list. |
Highlight drop-down Parent Item.
Select All Categories Menu. |
On the right, there is a field to select the parent item.
Click on it. Then select the option Multiple Categories. |
Type Nutrient Articles in Menu title text box. | Lastly let's give this menu a title - we will call it Nutrient Articles. |
Click on Save | Click on Save button. |
Let’s have a look at the all the changes on the Digital India webpage. | |
Refresh the Digital India webpage. | Let’s refresh the webpage and click on Multiple categories menu item. |
Point to sub-menu item Nutrient Articles | Immediately, we see the sub-menu item Nutrient Articles displayed below it.
Click on it. |
Point to both the table and then to the sub-categories | This page lists all the articles under this category in a tabular format.
The sub-categories- Vitamins and Minerals are listed separately. <<PAUSE>> |
Highlight the URL for this webpage | Now, let’s have a look at the title that is displayed for this web-page.
It says Nutrient Articles, as you can see here. |
How can we change this title to a different one?
We can do this through the Menu settings. | |
Switch to Menu Manager webpage. | Switch to the Menu Manager webpage. |
Click on Page Display. | Let’s click on the tab Page Display. |
Note that here all the page settings are optional. | |
In Browser Page Title field, type Nutrient Category | |
Click on Save and Close. | Then click on Save and Close button. |
Switch to Digital India webpage. Press F5. | Switch to the Digital India webpage and refresh it. |
Notice the browser title now.
It says Nutrient Category. | |
Click on Digital India. | Click on the Digital India link to go back to the Homepage. |
Switch to Menu Manager webpage. | Let us switch back to the Menu Manager. |
Point to Home button. | Notice the Home button in the top toolbar. |
This makes the page associated with the selected menu as the website Homepage. | |
Highlight Home menu. | By default, the menu item Home is set as the default Homepage. |
Hover cursor over Home column button. | We can verify this by hovering the cursor on the Home column button.
The tool tip says “Default”. |
Let's make the Nutrient Articles submenu as the default Homepage. | |
Select the check-box to the left of Nutrient Articles → Home. | Click on the check-box to the left of the title and click on Home button in the toolbar. |
Point to yellow star. | Notice that the yellow star now appears next to this submenu. |
Switch to Digital India webpage. Press F5 | Switch to the Digital India webpage and refresh it. |
Notice that the Homepage has changed. | |
Show Slide 6:
Importance of Menus |
Menus are important in Joomla because
|
Switch to Menu Manager webpage. | Switch to Menu Manager webpage. |
Select the check-box. Click Unpublish.
|
Select the check-box to the left of Nutrient Articles submenu.
Click on the Unpublish button on the top toolbar. The system shows an error Can't unpublish default home. |
This means that the menu associated with the Homepage cannot be unpublished. | |
Select the check-box. | However, we can unpublish the parent menu.
Click on the check-box to the left of Multiple Categories |
Click Unpublish. | Click on Unpublish button in the toolbar. |
Highlight the Unpublish | Unpublishing a menu also un-publishes all its submenus. |
Switch to Digital India webpage | Let's go to the Digital India webpage and check what we have done. |
Press F5 | Refresh the Homepage. |
Highlight the error. | Notice that the Homepage now shows an error The requested page cannot be found.
This is because the default Home menu - Nutrient Articles also got unpublished. |
Switch to Menu Manager | Let's go back to the Menu Manager. |
Click on the status icon. | Publish the Multiple Categories by clicking on the Status icon. |
Switch to Digital India webpage - Press F5. | Switch to the Digital India webpage and refresh it. |
Note that the error on the Homepage has now gone. | |
We can see the Nutrient Articles being displayed.
Let us summarize. | |
Switch to Slide 7:
Summary: Same as narration |
In this tutorial, we learnt about:
|
Switch to Slide 8:
Same as narration |
We also learnt how to:
|
Slide 9 & 10:
Assignment 1: |
Here are 2 assignments for you:
Hint: Use the guidelines given in the assignment-text file provided with this tutorial
|
Assignment 2:
|
Hint: Use the Search Tools filter. |
Show Slide 12:
(About Spoken Tutorial Project) |
The video at the following link, summarizes the Spoken Tutorial project.
Please download and watch it. |
Show Slide 13:
(About Spoken Tutorial Project) |
The Spoken Tutorial Project Team
For more details, please write to us. |
Show Slide 14:
(Acknowledgement) |
Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at the link shown. |
This is Priyanka signing off. Thank you for joining. |