Difference between revisions of "Joomla/C2/Menus-in-Joomla/English"
Nancyvarkey (Talk | contribs) |
|||
(One intermediate revision by one other user not shown) | |||
Line 25: | Line 25: | ||
*Create '''sub-menus''' | *Create '''sub-menus''' | ||
− | *Change the default | + | *Change the default '''Homepage''' and |
*Unpublish '''menu items'''. | *Unpublish '''menu items'''. | ||
− | |||
|- | |- | ||
Line 36: | Line 35: | ||
*'''Ubuntu Linux OS''' 14.04 | *'''Ubuntu Linux OS''' 14.04 | ||
*'''Joomla''' 3.4.1 | *'''Joomla''' 3.4.1 | ||
− | *'''Apache | + | *'''Apache, MySQL''' and '''PHP''' obtained through '''XAMPP''' 5.5.19 |
|- | |- | ||
Line 43: | Line 42: | ||
|| To follow this tutorial: | || To follow this tutorial: | ||
− | *You should know how to create | + | *You should know how to create '''articles''' in '''Joomla''' |
*If not, check the relevant '''Joomla''' tutorials on the '''Spoken Tutorial''' website. | *If not, check the relevant '''Joomla''' tutorials on the '''Spoken Tutorial''' website. | ||
Line 54: | Line 53: | ||
|| Highlight '''Main Menu''' | || Highlight '''Main Menu''' | ||
− | || On the right of the | + | || On the right of the '''Homepage''', there is a box which says '''"Main Menu"'''. |
|- | |- | ||
Line 65: | Line 64: | ||
|| '''Menus''' are a way to help us navigate the website. Every '''menu''' has a set of '''menu items'''. | || '''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.''' | Here '''"Home"''' is a '''menu item''', which points to all '''Featured articles.''' | ||
− | This is the reason why any '''article''' that is marked as '''" | + | |
+ | This is the reason why any '''article''' that is marked as '''"Featured"''' appears on our '''Homepage'''. | ||
|- | |- | ||
Line 75: | Line 76: | ||
Click on category link '''Vitamins''' | Click on category link '''Vitamins''' | ||
|| Every '''menu item''' defines a '''URL''' to a '''webpage'''. | || Every '''menu item''' defines a '''URL''' to a '''webpage'''. | ||
− | |||
− | Or it can be set to list all '''articles''' under a category, like '''Vitamins'''. | + | |
+ | 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'''. | ||
|- | |- | ||
Line 101: | Line 105: | ||
|| Click on '''Main Menu'''. | || Click on '''Main Menu'''. | ||
− | || Click on the title '''Main Menu'''. We can see the menu items associated with this 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'''. | Notice that '''Menu Manager: Menu Items''' has a similar layout as '''Article Manager'''. | ||
Line 108: | Line 115: | ||
|| | || | ||
− | || Let’s create a '''menu item''' which will point to our '''article "Nutrients"'''. | + | || Let’s create a '''menu item''' which will point to our '''article "Benefits of Nutrients"'''. |
|- | |- | ||
|| Click on '''New'''. | || Click on '''New'''. | ||
− | || Click on '''New''' button in the toolbar. | + | || Click on the '''New''' button in the toolbar. |
|- | |- | ||
Line 119: | Line 126: | ||
Point to various options. | Point to various options. | ||
− | || '''Menu Item Type''' field decides the type of page to be shown when we click on that '''menu item'''. | + | || '''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. | There are various options like '''Single Article, List of articles in a category''' etc. | ||
Line 135: | Line 143: | ||
|| Click on '''Articles''' in the new window. | || Click on '''Articles''' in the new window. | ||
− | We can see a list of options under Articles. | + | We can see a list of options under '''Articles'''. |
Click on '''Single Article'''. | Click on '''Single Article'''. | ||
Line 143: | Line 151: | ||
|| Depending on the '''Menu Item Type''', some new parameters may be required. | || 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. | Since we have selected '''Single Article''', a new field '''Select Article''' has appeared. | ||
Line 156: | Line 165: | ||
|| A new window opens with a complete list of '''articles'''. | || 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'''. | + | |
+ | This window has a search text box, which works on the title of the '''article'''. | ||
|- | |- | ||
Line 164: | Line 174: | ||
|- | |- | ||
− | || Click on '''Nutrients.''' | + | || Click on '''Benefits of Nutrients.''' |
Line 180: | Line 190: | ||
This is a mandatory field. | This is a mandatory field. | ||
+ | |||
Let us type '''Single Article - Nutrients''' as the '''title'''. | Let us type '''Single Article - Nutrients''' as the '''title'''. | ||
Line 206: | Line 217: | ||
|| Click on '''Digital India'''. | || Click on '''Digital India'''. | ||
− | || Click on '''Digital India''' at the top left to go back to the | + | || Click on '''Digital India''' at the top left to go back to the '''Homepage'''. |
|- | |- | ||
Line 217: | Line 228: | ||
|| Let's change the '''Single Article-Nutrients menu item''' to '''List of categories'''. | || Let's change the '''Single Article-Nutrients menu item''' to '''List of categories'''. | ||
+ | |||
So, click on the '''title Single Article-Nutrients'''. | So, click on the '''title Single Article-Nutrients'''. | ||
Line 222: | Line 234: | ||
|- | |- | ||
|| Click on '''Select'''. | || Click on '''Select'''. | ||
− | |||
− | |||
|| Click on the '''Select''' next to '''Menu Item Type.''' | || Click on the '''Select''' next to '''Menu Item Type.''' | ||
− | In the new pop-up window, click on '''Articles''' and then on '''List All Categories'''. | + | |- |
+ | ||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 ''' | + | || We are back to the '''Menu manager''' window. |
|- | |- | ||
Line 240: | Line 253: | ||
It requires us to select the '''Top Level Category'''. | It requires us to select the '''Top Level Category'''. | ||
+ | |||
This is the '''category''' whose '''subcategories''' will be listed under this '''menu item'''. | This is the '''category''' whose '''subcategories''' will be listed under this '''menu item'''. | ||
Line 274: | Line 288: | ||
|| Highlight '''Nutrients''' and '''Food Sources.''' | || 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. | + | |- |
+ | ||Highlight the numbers. | ||
− | || | + | ||The numbers next to the '''category''' indicate the number of '''articles''' under that '''category'''. |
− | + | |- | |
+ | || | ||
− | Also, notice that the | + | ||Also, notice that the '''category Uncategorized''' is not shown here. |
− | That is because it has neither any article nor any subcategory assigned to it. | + | That is because it has neither any '''article''' nor any '''subcategory''' assigned to it. |
|- | |- | ||
|| Click on '''Nutrients'''. | || Click on '''Nutrients'''. | ||
− | Scroll down to see the article and sub-categories. | + | Scroll down to see the '''article''' and '''sub-categories'''. |
||Click on '''Nutrients''' link. | ||Click on '''Nutrients''' link. | ||
− | The | + | The '''article Benefits of Nutrients''' and '''subcategories Vitamins''' and '''Minerals''' are shown up. |
|- | |- | ||
|| Click on '''Digital India.''' | || Click on '''Digital India.''' | ||
− | ||Click on '''Digital India''' link at the top left to go back to the | + | ||Click on '''Digital India''' link at the top left to go back to the '''Homepage''' |
|- | |- | ||
Line 335: | Line 352: | ||
||Select '''Nutrients''' in the drop-down '''Choose a Category'''. | ||Select '''Nutrients''' in the drop-down '''Choose a Category'''. | ||
− | ||By default, the selected category is '''Uncategorised'''. | + | ||By default, the selected '''category''' is '''Uncategorised'''. |
− | Let's select '''Nutrients''' in the | + | Let's select '''Nutrients''' in the drop-down list. |
|- | |- | ||
Line 350: | Line 367: | ||
|- | |- | ||
− | ||Type '''Nutrient Articles''' in Menu title text box. | + | ||Type '''Nutrient Articles''' in '''Menu title''' text box. |
||Lastly let's give this '''menu''' a '''title''' - we will call it '''Nutrient Articles'''. | ||Lastly let's give this '''menu''' a '''title''' - we will call it '''Nutrient Articles'''. | ||
Line 396: | Line 413: | ||
||How can we change this '''title''' to a different one? | ||How can we change this '''title''' to a different one? | ||
− | We can do this through the ''' | + | We can do this through the '''Menu settings'''. |
|- | |- | ||
Line 438: | Line 455: | ||
||Click on '''Digital India.''' | ||Click on '''Digital India.''' | ||
− | ||Click on the '''Digital India''' link to go back to the ''' | + | ||Click on the '''Digital India''' link to go back to the '''Homepage'''. |
|- | |- | ||
Line 453: | Line 470: | ||
|| | || | ||
− | ||This makes the '''page''' associated with the selected '''menu''' as the website ''' | + | ||This makes the '''page''' associated with the selected '''menu''' as the website '''Homepage'''. |
|- | |- | ||
||Highlight '''Home''' menu. | ||Highlight '''Home''' menu. | ||
− | ||By default, the '''menu item Home''' is set as the default ''' | + | ||By default, the '''menu item Home''' is set as the default '''Homepage'''. |
|- | |- | ||
Line 470: | Line 487: | ||
|| | || | ||
− | ||Let's make the '''Nutrient Articles submenu''' as the default ''' | + | ||Let's make the '''Nutrient Articles submenu''' as the default '''Homepage'''. |
|- | |- | ||
Line 490: | Line 507: | ||
|| | || | ||
− | ||Notice that the | + | ||Notice that the '''Homepage''' has changed. |
|- | |- | ||
Line 498: | Line 515: | ||
||'''Menus''' are important in '''Joomla''' because | ||'''Menus''' are important in '''Joomla''' because | ||
− | *Content can be displayed only via menus and | + | *Content can be displayed only via '''menus''' and |
− | *Every website must have at least one published menu. | + | *Every website must have at least one published '''menu'''. |
|- | |- | ||
Line 521: | Line 538: | ||
|| | || | ||
− | ||This means that the menu associated with the | + | ||This means that the '''menu''' associated with the '''Homepage''' cannot be unpublished. |
|- | |- | ||
||Select the check-box. | ||Select the check-box. | ||
− | ||However, we can unpublish the parent menu. | + | ||However, we can unpublish the '''parent menu'''. |
Click on the check-box to the left of '''Multiple Categories''' | Click on the check-box to the left of '''Multiple Categories''' | ||
Line 538: | Line 555: | ||
||Highlight the '''Unpublish''' | ||Highlight the '''Unpublish''' | ||
− | ||Unpublishing a menu also un-publishes all its submenus. | + | ||Unpublishing a '''menu''' also un-publishes all its '''submenus'''. |
|- | |- | ||
Line 548: | Line 565: | ||
||Press '''F5''' | ||Press '''F5''' | ||
− | ||Refresh the ''' | + | ||Refresh the '''Homepage'''. |
|- | |- | ||
||Highlight the error. | ||Highlight the error. | ||
− | || Notice that the | + | || Notice that the '''Homepage''' now shows an error '''The requested page cannot be found.''' |
− | This is because the default | + | This is because the default '''Home menu - Nutrient Articles''' also got unpublished. |
|- | |- | ||
Line 574: | Line 591: | ||
|| | || | ||
− | ||Note that the error on the ''' | + | ||Note that the error on the '''Homepage''' has now gone. |
|- | |- | ||
Line 598: | Line 615: | ||
||We also learnt how to: | ||We also learnt how to: | ||
*Create '''sub-menus''' | *Create '''sub-menus''' | ||
− | *Change the default | + | *Change the default '''Homepage''' and |
*Unpublish '''menu items'''. | *Unpublish '''menu items'''. | ||
Line 607: | Line 624: | ||
||Here are 2 assignments for you: | ||Here are 2 assignments for you: | ||
− | *Create a new '''menu item Category Blogs and Lists''' under the '''Main Menu'''. | + | *Create a new '''menu item - Category Blogs and Lists''' under the '''Main Menu'''. |
*Create 2 '''submenus''' under this '''menu item.''' | *Create 2 '''submenus''' under this '''menu item.''' | ||
Hint: Use the guidelines given in the '''assignment-text''' file provided with this tutorial | Hint: Use the guidelines given in the '''assignment-text''' file provided with this tutorial | ||
*Refresh the '''Homepage.''' | *Refresh the '''Homepage.''' | ||
− | *Click on the newly created menu items and understand the difference between the 2 menu types. | + | *Click on the newly created '''menu items''' and understand the difference between the 2 menu types. |
|- | |- |
Latest revision as of 15:45, 12 February 2016
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. |