Difference between revisions of "Joomla/C2/Menus-in-Joomla/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 108: Line 108:
 
||  
 
||  
  
−
|| 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"'''.
  
 
|-
 
|-
Line 164: Line 164:
  
 
|-
 
|-
−
|| Click on '''Nutrients.'''
+
|| Click on '''Benefits of Nutrients.'''
  
  

Revision as of 11:15, 10 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:
  • 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 "Benefits of 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 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.

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.

Contributors and Content Editors

Itspriyanka, Nancyvarkey, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Joomla/C2/Menus-in-Joomla/English&oldid=25707"