5.2 Using the Joomla Menu Manager

In the previous article, we learned how to create a new menu item for a new Joomla article. In this article, we will review how Joomla uses the Menu Manager to organize links so that your viewers can navigate between the various pages of your website. This article covers the default Joomla System – which comes with the default content when you upload Joomla to your website and is shown on the Joomla DEMO website, demo.joomla.org. Sadly, the default Joomla Menu system is not very well organized. In the next article we will cover how to replace the default menu system with a more organized one. Then in the article after that, we will cover how to set up an expandable menu, called RocNavMenu, to display your menu more efficiently.

Review of the Default Joomla Menu System
Go to the Joomla Demo Website (demo.joomla.org) and log into the Administrator Control Panel. Click on Joomla 1.5 See Backend and then log in with the User Name demo and the Password demo:

Then on the Top Menu, go to the MENUS tab. Here you see the Menu Manager, Menu Trash and six active Menus on the Joomla Demo website.

Click on the Menu Manager to bring up the list of Menus:

This is way too many menus to have on any website! Imagine picking up a book and seeing 6 different Tables of Contents! Even worse, some of the 60 articles are listed on more than one menu while other articles are not listed on any of the menus. This makes the Joomla Demo website very confusing. Joomla does offer a very good way to organize you links, but it is not used on the Demo website.

Unfortunately, while the default Joomla content is organized adequately in terms of Sections and Categories, this organization is NOT translated to the default Joomla Menus. Instead, if you go to Menus > Menu Manager, you will see that the Joomla default content is “organized” (or not) into six different menus which are scattered about the website.

Below are the six menus used in the default Joomla menu system.

Joomla uses 6 different menus scattered in various positions throughout the default Front Page to show you that you can have lots of different kinds of menus in lots of different places. But the result is that the Section and Category organization of the website is lost.

Here is what the 6 menus of the Joomla Default Content look like on the Front Page:

Nowhere on the Joomla DEMO website is there anything like a Table of Contents. Nor is it at all obvious how articles are related to other articles or even in what order the articles might be read. It is like a book which has had all of the pages randomly thrown together with the reader left to figure out how to make sense of everything. Hopefully, future versions of Joomla will fix this problem. But in the meantime, we will have to fix it ourselves and use the process of fixing it as an example of how to build a single horizontal menu which can act as a Table of Contents for your website.

Be aware of this because when you download the default Content with your Joomla program, it is going to look exactly like the Joomla Demo website and will take a little modification to organize the menu in a way that will be easier for your viewers to understand.

Again, this precaution is not necessary if your website has only a few pages. But it is essential if your website will eventually have 20 or more pages.

The way the Joomla Demo website menus are organized is also not an efficient use of space. Having six menus scattered all over your web pages leaves less room for the actual content (which is the text, images and videos of the articles). In defense of the authors of the Joomla Demo Site, they are simply trying to show off all the different ways and positions that you can display Joomla Menus. But Joomla beginning web site builders would be better served had the Demo site simply used one or two of the best ways to display Menus. At the very least, you should limit menus to a single horizontal menu below the header and if necessary, another vertical menu in the left or right side bar. Thankfully, when you have your own website, it will be an easy matter to delete any menus you do not want to use and position/reformat the rest so that they are better organized.

We are going to get rid of 5 of the 6 default menus: 

Since each menu is actually a module (or Joomla box), deleting them is done by going to Extensions/Module Manager and disabling them. This will leave only the main menu which we will turn into a horizontal drop down menu. 

The most organized and efficient type of menu is the drop down or multi-level horizontal menu. There is only one small example of this on the Joomla DEMO website. Click on Menus > Main Main Menu to bring up the Menu Item Manager for the Main Menu.

Note that you can control the order in which the Menu Item appear in the Main Menu by using the UP or DOWN arrows. You can also delete any menu items (except the HOME page) or add new Menu Items.

To edit Menu items, simply double click on one. To add a new menu item, simply click on NEW. But before you add a new Menu Item, you first have to write the Article using the Article Manager BEFORE you can attach the new Article to the new Menu Item. This is because the New Menu item must have something it can be pointed to.

Here is the way the Main Menu looks in its vertical default position. Note that for the time being we will assume you are using the Milky Way template which is the default Joomla template which is active when you first start up your Joomla site:

You can see that the Main Menu includes only 9 pretty randomly chosen articles. The other five menus also have randomly chosen articles. This certainly does not give the viewer an impression of being a well-organized site. Instead, the lack of organization can leave the viewer looking in vain for a Table of Contents.

Using the Module Manager to Change the Position and Appearance of your Main Menu
To get the child to display, you have to set the Main Menu to display more levels. To understand how this is done, remember that each Menu, including the Main Menu, is a Content Box. Joomla calls Content Boxes “Modules”. Therefore each Menu box is a Module and formatting of Module properties is done through the Module Manager (NOT the Menu Manager). In other words, the content of Menus is defined in the Menu Manager and the APPEARANCE of Menus is controlled by the Module Manager.

To see what this looks like, exit the preview screen and close the Menu Item –Edit screen.
We will eventually rearrange the 44 articles in the default Joomla content so that they all appear in a single Main Horizontal Menu and reflect the organization created by the division of articles into Sections and Categories. This is done primarily with the Menu Item Manager for the Main Menu (reached by Menus > Main Menu).

But before we start, let’s go to Extensions > Module Manager and change the main menu from a vertical side menu to a horizontal top menu. This requires de-activating the Top Menu in order to make room for the Main Menu at the top just below the Header.

First, in the Module Manager, we de-activate the Top Menu module by selecting it and then clicking on the DISABLE ICON in the upper right hand corner. A RED button with a white X in it will appear to the right of the Top Menu.

Then, also in the Module Manager, find the Module named Main Menu and double click it to open the Module > Edit screen.

We want to change the SHOW TITLE button on the upper left part of the screen from YES to NO. We also want to change the POSITION from LEFT to USER 3 using the Position Drop Down Arrow. (Note that User 3 is the Top Menu Position with the default Joomla Templates. However newer templates often have a horizontal top menu position called mainmenu, nav, navmenu, horznav or something like that to define the top horizontal menu position).

The Module (Edit) Screen should now look like this:

Click on the Green Apply button, then select Preview to see what the Main Menu now looks like. It should look like the screen shot below:

Having a bunch of text in the Header tends to confuse the viewer. In order to help focus the viewer’s attention on the Main Menu, we will next disable the “NEWS FLASH” module which is in the TOP position. Go to Extensions > Module Manager, select the News Flash module and then click on the Disable Button.

Next, while still at the Module Manager, select the Main Menu module and click on the Edit button to go back the Module (Edit) screen.

Changing Parameters for the Main Menu Module
In the PARAMETERS section on the right side of the screen, change the END LEVEL from 0 to 9. This change in setting tells Joomla that you want to display a multi-level menu.

Note that the Parameter called “Always show sub-menu items” on the right side of the screen has been set to NO. Change this setting to YES, click on APPLY, then click on the Preview screen. You will see that the sub-menu item shows even when you do not place your cursor over its parent. Your Main Menu should now look like the following:

Why use a single top horizontal menu?
There are several reasons to organize your website in this manner. The first is that your website viewers have been reading books and magazines and newspapers all their life. They are used to seeing a Table of Contents and having the content organized into Sections and Chapters and Pages (or in the case of a Newspaper, Sections and Pages and Articles). The Main Menu should be a Table of Contents which your viewer can quickly scan through in order to understand the organization of your website and where they might be able to find a particular page or article they are interested in reading.

Another important reason is conservation of space. Unlike a book, the Main Menu will and should appear on every page to help the viewer with Site Navigation. Also modern pages often have a Header Image at the top of the screen and a Multimedia Slide Presentation near the top of the screen. In order to provide more room for content and images in the Content section of your webpage, the use of Main Menus in the Side Bar is declining. The Main Menu therefore is now commonly inserted as a Horizontal Menu between the Header and the Main Content Area. You therefore do not want the Main Menu to take up a lot of room or be too much of a distraction to the reader. The way to show all of your articles in a limited amount of space is use a Horizontal “Drop Down Menu” in which all that appears on the opening screen are the SECTIONS. The categories and articles are hidden until the viewer points their cursor over the section. This displays the categories. Pointing the cursor over the categories displays the articles.

Since there is only room for about 8 tabs in a horizontal menu, and since the Home Page and Contact page are usually listed in this top menu, you will need to limit your number of sections to about 6 sections. (Alternately, if you have a smaller number of pages, you can just display up to 6 CATEGORIES and hide the articles as children of their categories.

Understanding Parent and Child Menu Items
Note that the second menu item, Joomla Overview has a sub-menu item below it (What’s New in 1.5?). In the example above, the What’s New menu item is a child of the Joomla Overview Menu Item. This means that the child appears below the parent. Put another way, the Child Menu Item is a SUB MENU item of the Parent Menu item.

When you changed the ALWAYS SHOW SUB MENU ITEMS button to YES, you were telling Joomla you want it to display any sub menu items all of the time. We will leave the Main Menu with this setting for now so we can see the building of our Drop Down Menu. But we will eventually hide the sub menu items so that they only display when the cursor is pointed at their PARENT item.

To see how a Parent – Child relationship (also called a Sub Menu Item) is created, go back to Menus, Main Menu Item Manager. Select the “Joomla Overview” Menu Item and click on the EDIT button in the upper right corner. This will bring you to the Menu Item (Edit) screen. Notice that in the Parent Item section on the left side of the screen, the parent for this Menu Item is called TOP. This means that this item has no parent and will be displayed on the first level of the Main Menu. Click on the CLOSE button to go back to the Menu Item manager.

Next select “What’s new in 1.5?” and click on the EDIT button to bring up the Menu Item Edit screen.

Note that the “Parent Item” for “What’s New in 1.5?” is not TOP or HOME. Instead it has been set for “Joomla Overview.” Thus, What’s New is a Child of Joomla Overview. It is possible for each parent item to have more than one child. It is also possible for Child Menu Items to have their own children (a three level menu).

Thus, two things have to happen in order to create a Parent – Child relationship. First, you have to create the higher level (Parent) Menu Item. Then when you create the Child Menu Item, you have to specifically designate its parent using the Menu Item (Edit) screen.

But going back to the Menu Item Manager screen, you will see that the Parent and the Child Menu Items are BOTH articles (see the Type column on the right side of the screen).

This is the problem with the default menu structure. This is not how the Article Manager was set up – it used Sections and Categories to organize articles. This is also not how the Table of Contents of most books is set up. They too organize books into Sections and Categories.

So what we really want is a menu which uses Sections and Categories as parent items and articles as child items. But how do we create Menu Items that are SECTIONS or CATEGORIES and not ARTICLES?

In the next article, we will show how to create Section and Category menu items to create a better more efficiently organized menu using the same Sections and Categories you used to organize your articles.

After you understand that process, in the following article, we will show you how to use an expandable menu to display your web pages more efficiently.