View source for Joomla/C2/Menus-in-Joomla/English

{| border=1
|| '''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:

*'''Menus''' and their importance in '''Joomla'''.
*'''Menu Manager'''
*And how to create '''menu items'''

|-
|| '''Show Slide 3''' 
Learning Objectives continued:
Same as narration
|| We will also learn how to:

*Create '''sub-menus'''
*Change the default homepage and
*Unpublish '''menu items'''.


|-
|| '''Show Slide 4'''
'''Versions and OS'''

|| For this tutorial, we will be using:
*'''Ubuntu Linux OS''' 14.04
*'''Joomla''' 3.4.1
*'''Apache''', '''MySQL''' and '''PHP''' obtained through '''XAMPP''' 5.5.19

|-
|| '''Show Slide 5'''
'''Prerequisites'''

|| To follow this tutorial:
*You should know how to create an '''article''' in '''Joomla'''
*If not, check the relevant '''Joomla''' tutorials on the '''Spoken Tutorial''' website.	

|-
|| 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'''.

Here '''"Home"''' is a '''menu item''', which points to all '''Featured articles.'''

This is the reason why any '''article''' that is marked as '''"featured"''' appears on our homepage.

|-
|| Click on '''Vitamin A.'''

Click on category link '''Vitamins'''
|| Every '''menu item''' defines a '''URL''' to a '''webpage'''.
A menu item can be set to point to an '''article''', like '''Vitamin A''' here.
Or it can be set to list all '''articles''' under a category, like '''Vitamins'''.

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


Alternately, you may click on '''Menus''' in the menu-bar at the top of the webpage and then on '''Menu Manager.'''

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

Notice that '''Menu Manager: Menu Items''' has a similar layout as '''Article Manager'''.

|-
|| 

|| Let’s create a '''menu item''' which will point to our '''article "Nutrients"'''.

|-
|| Click on '''New'''.

|| Click on '''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'''.

There are various options like '''Single Article, List of articles in a category''' etc.

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

Since we have selected '''Single Article''', a new field '''Select Article''' has appeared.

|-
|| 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'''.

This window has a search text box which works on the title of the '''article'''.

|-
|| Highlight '''filters.'''

|| It also has filters to narrow down the list of '''articles''' visible in the window.

|-
|| Click on '''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.

Let us type '''Single Article - Nutrients''' as the '''title'''.

|-
|| 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'''.

So, click on the '''title Single Article-Nutrients'''.

|-
|| Click on '''Select'''.

Click on '''Articles -> List all Categories'''

|| Click on the '''Select''' next to '''Menu Item Type.'''

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'''.

This is the '''category''' whose '''subcategories''' will be listed under this '''menu item'''.

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.'''


Highlight the numbers.

||Notice that two of our categories '''Nutrients''' and '''Food Sources''' are shown on the top left of the webpage.

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 dropdown 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
*Content can be displayed only via menus and
*Every website must have at least one published menu.

|-
||Switch to '''Menu Manager''' webpage.

||Switch to '''Menu Manager''' webpage.

|-
||Select the check-box. Click '''Unpublish'''.


Highlight the error.

||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:

*'''Menus''' and their importance in '''Joomla'''.
*'''Menu Manager'''
*And how to create '''menu items'''

|-
||Switch to Slide 8:

Same as narration
||We also learnt how to:
*Create '''sub-menus'''
*Change the default homepage and
*Unpublish '''menu items'''.

|-
||Slide 9 & 10:

Assignment 1:
||Here are 2 assignments for you:

*Create a new '''menu item Category Blogs and Lists''' under the '''Main Menu'''.
*Create 2 '''submenus''' under this '''menu item.'''
Hint: Use the guidelines given in the '''assignment-text''' file provided with this tutorial
*Refresh the '''Homepage.'''
*Click on the newly created menu items and understand the difference between the 2 menu types.

|-
||Assignment 2:


||
*Delete the menu item '''Nutrient Articles'''
*See if you can restore it back.
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 
*conducts workshops and 
*gives certificates on passing online tests.

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.

|-
|}