5.3 Building Your Joomla Menu using Sections and Categories

In the last article, we reviewed the default Joomla Menu system as shown on their DEMO website demo.joomla.org. There essentially was no organization as menu items were displayed in a pretty random fashion. However, in a previous article on writing Articles, we discussed how to use sections and categories to organize your Joomla web pages. In this article, we will discuss how to apply this same structure of Sections and Categories used to organize your Articles to also organize your Main Menu. The purpose of this organization is to help readers navigate your website – much as any good book includes a Table of Contents in the front to help readers understand where things are placed in the book.

Applying Joomla Sections and Categories to the Joomla Main Menu

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 and click on the Main Menu to reach the Menu Item Manager for the Main Menu.

Select the FAQ Menu Item and click on EDIT to return to the Menu Item (Edit) screen.

Notice that this Menu Item has TOP listed for its parent. But instead of having to select an Article to link to in the BASIC PARAMETERS area, Joomla allows you to select a SECTION to link to. How did this happen?

To see how this is done, click CLOSE to go back to the Menu Item Manager screen.

Creating a new SECTION menu item
There are 5 menu items or links in the main menu. All 5 are published. First, we will disable all of them except HOME and FAQ by selecting them with the boxes to their left, then clicking on UNPUBLISH.

We will now add a new Section Menu Item. Click on the green NEW button in the upper right hand corner of the screen to create a new Menu Item for the Main Menu. This brings you to the Menu Item (New) screen where you are given 12 choices.

Joomla has lots of different kinds of Menu Items, but we will mainly use the ARTICLES menu item:
Although we want to create a SECTION link, it is not one of the initial choices. We first need to click on the ARTICLES option (because SECTIONS AND CATEGORIES are a way of organizing ARTICLES). This will bring you to the Select Menu Item Type screen.

If we were creating a menu item for a specific page or article, we would click on ARTICLE LAYOUT. However, here we will select the Section Layout so that we can set a Section as one of the top level Menu Item. This takes us to the Menu Item (New) Details page.

Remember we have three Sections listed in our Section Manager. These are About Joomla, News and FAQS. We already have the FAQS section as a Menu Item and the About Joomla Section as a Menu Item. But we really need a NEWS section. So let’s call this new menu item NEWS. In the Parameters (Basic) area, use the drop down arrow to link this menu item to the NEWS section.

The name of the section does not have to match the name of the section in the Section Manager. Often Menu Items have Titles which are much shorter than the Sections, Categories or Articles they link to.

We will also show the category list, but hide the category description and category item number. Your screen should now look like the following:

Click on SAVE to return to the Menu Item Manager.

To simplify things, let’s select and UNPUBLISH the following 4 Menu Items:
Joomla License, The News, Web Links and News Feeds.

Let’s also change the name of the Menu Item “More About Joomla” to “About Joomla” so that it exactly matches the name of the Section it is assigned to. Select this menu item, then click on EDIT. In the Menu Item (Edit) screen, change the TITLE to “About Joomla” by deleting the word MORE. Also change the Category Description and # Category Items from SHOW to HIDE. Then click SAVE to return to the Menu Item Manager screen. Click on the Preview Button and you will see that we now have 5 active Parent Menu Items and one Child Menu Item.

NOTE: If your menu shows up as a vertical menu instead of the above horizontal menu, go back to the previous article and follow the steps for using the module manager to change the main menu from a vertical to a horizontal menu by placing it in the User 3 position. Then go back to Menus, Main Menu to finish this exercise using the Menu Item Manager for the Main Menu.

For now, we will pretend that Joomla Overview is also a SECTION. This gives us 4 sections and the Home page in our Horizontal Main Menu.

Creating a CATEGORY LIST menu item
Let’ next link some categories to the three real sections. To save time, and keep things simple, we will only link two categories to each of our three sections.

Return to the Menu Item Manager screen. Then click on NEW > ARTICLES > CATEGORY LIST LAY OUT to create a new “category” type menu item.

This brings us to the Category List Layout screen:

You do not need to remember the names of all your categories or sections, because when you click on the CATEGORY drop down arrow in the Parameters Basic area, it shows you a list of the categories and their associated sections. Call this menu item “The CMS” and for the Parent Item select About Joomla. Your screen should now look like the following:

Then click SAVE to return to the Menu Item Manager screen.

Repeat this process to create a new menu item named “The Community” as the second child for About Joomla, and Current Users and General as the two children for FAQ and News Archive and Newsflash as the two children for NEWS.

When you are done making these links, click on the Preview button and you will see that your Main Menu now looks like the following:

This looks rather confusing. But remember that we will eventually hide most of these category and article links in a well-organized Drop Down menu.

Creating a new ARTICLE menu item
Many websites have fewer than 24 pages and therefore will only need a two level drop down menu. But just to show you how to create the third level and what it will look like, let’s create some ARTICLE child menu items for a few of the CATEGORY child menu items we just created.

Return to the Menu Item Manager screen. Then click on NEW > ARTICLES > ARTICLE LAY OUT to create a new “article” type menu item.

This brings us to the Article Layout screen:

Again, we do not need to remember what articles are in what categories. Just click on the SELECT button, in the Select Article field. You can see that Joomla Facts is in the “The Community” category. Select this article. Then type in the name of the article for the Menu Items Details TITLE and select the category “The Community” as the parent for the article.
Then click SAVE to return to the Menu Item Manager screen.

Last, let’s find a child for the General Category in the FAQ section. Click on NEW > ARTICLES > ARTICLE LAY OUT to create a new “article” type menu item. You will need to go to the third page of Articles. Here you will find an Article called “What is the FTP Layer for? Select this article and type this name as the TITLE of the new Menu Item. Also select “General” as its parent. Then click SAVE to return to the Menu Item Manager screen.

When you are done making these links, click on the Preview button and you will see that your Main Menu now looks like the following:

It is becoming apparent that the search module is getting in the way. Go back to Extensions > Module Manager and find the Search Module. You’ll see that it is in the USER 4 position. Select this module and click on Edit. Change its Position to Right and click on Save. Click on Preview and you’ll see that the Search Module has now moved down to the right and out of the way of the Main Menu.

How to Hide Sub Menu Items
The Main Menu still looks like a major mess. The next step is to hide the sub menu items so that they only appear when the viewer points the cursor arrow at their parent menu items. There are many ways to hide sub-menu items. The easiest way is to choose a template that already has a program for hiding sub-menu items. This is another one of the key benefits of the Cloud Base 2 Template. With the Cloudbase 2 template and with the RokNavMenu installed, you already have a functional horizontal drop down just below your header/logo.

Website Building Work Sequence
Write articles (including images) and place in specific sections and categories. Then place all in the main menu with sections as parents (first level) and the categories as children (second level), then articles as the children of categories (third level).

Hopefully, you now have a clearer understanding of how you can organize your Menu structure so that it makes the structure of your articles. In the next article, we will get rid of much of the default Joomla content so that you can start replacing it with your own content. We will then discuss how to configure a state of the art expandable drop down menu called the RokNavMenu FUSION menu.