Chapter 8. Helping Your Visitors Find What They Want – Managing Menus

Menus and content in Joomla are closely intertwined. In the previous chapters, you saw that menu links don't just point to existing pages, as you might expect if you have experience building websites the old-fashioned way. When adding a menu link, you don't just tell Joomla what page the menu link should point to; rather, you instruct it to make that page. You saw how this works when you added content to your site. By adding menu links, you created category pages and other types of pages.

However, to your visitor, Joomla menus are no different from other website menus. To them, menus should provide an easy means of navigation. In this chapter, we'll concentrate on menus as a means to navigate. We'll focus on how you can make and tweak menus to design clear and intuitive navigation, and also on how you can help the visitors find what they want without difficulty.

Up to now, you've added menu links using mainly the default...

How many menus can you have?

On any Joomla website, you can create as many menus as you want. Every menu can contain one or more menu items; each menu item points to a page on the site. The default sample site that you installed in Chapter 2, Getting Joomla! Up and Running, is an example, as it contains no fewer than six menus. On the home page, four of them are shown: User Menu (only displayed after a registered user has logged in to the site), the horizontal Top menu, the About Joomla menu, and Main Menu (titled This Site). In the following screenshot, you can see how the frontend menus are reflected in the administrative interface:

The Australian Parks menu and the Fruit Shop menu have been added to the sample data for demonstration purposes; they're only used on the Parks and Fruit Shop example site pages.

At least one menu is needed for Joomla to function properly—the menu containing the link to the home page. By default, that's the menu called Main Menu. The other ones are only there...

Creating user-friendly navigation – cleaning up Main Menu

When building a site, you'll start by adding links to Main Menu. This menu is always part of the Joomla installation, even if you don't install sample data. But as your site evolves, it can become a long and cluttered list of hyperlinks. Even the menu of our small CORBA example site already contains too many links. When you find Main Menu getting long and messy, what options do you have to improve site navigation?

Option one – changing the order of menu items

By default, a new menu item is added to the end of the existing menu. Have a look at the following screenshot:

If you add a new link to any menu, it will always show up as the last item, as shown in the following screenshot:

This is probably not what you want. The order in which you add items isn't necessarily the order in which you want them to be displayed to your visitor. It's a good idea to rearrange links as soon as you've filled the menu with hyperlinks.

Tip

Deleting or unpublishing...

Time for action – changing the order of menu items

On the CORBA example site, let's move Main Menu items around to present them in a more logical order. The items that we want to get most attention should be in the top half of the menu; links to less important or static content should be placed down below. In the following screenshot, the original menu is shown:

A more logical order—from most important to less important—is shown in the following screenshot:

It takes just a few steps to adjust the order of menu items:

1. Navigate to Menus | Main Menu.

2. In the Ordering drop-down list above the menu items list, select Ordering ascending. Now click on the three vertical squares on the left-hand side of the menu item you want to move and drag-and-drop the menu item to its new position, as shown in the following screenshot:

   

Repeat the previous step until you're happy with the sequence of menu items.

What just happened?

The menu items now show up in the order that you've chosen. News and Activities have...

Time for action – creating a secondary menu item

To remove the News Archive link from the primary level in Main Menu and show it as a sublevel link, use the following steps:

1. To edit the Main Menu content, navigate to Menus | Main Menu.

2. Click on the title of the item you want to edit, News Archive.

3. In the Details section, Parent Item is set to Menu Item Root. This indicates it's a top level link. Change Parent Item to News:

   

4. Click on Save & Close. In the list of menu items in Menu Manager, the new sublevel menu item is shown indented, as shown in the following screenshot:

   

5. To make sure the menu will display the sublinks intended, let's check a setting of the current menu module. Go to Extensions | Module Manager.

6. In the Select Type drop-down list, select Menu. Click on the This Site menu module to edit it.

7. On the Module options screen, check if End Level is set to All. This indicates that all submenu levels will be displayed. Leave Show Sub-menu Items set to No, unless you want to always display...

Time for action – create a new, empty menu

In Main Menu of the example site, three items are suitable to be shown in another menu. These links are of interest to visitors who want to know more about the CORBA organization. Let's create a new menu, About CORBA, so that we can move the menu links Who are CORBA?, Mission Statement, and Contact there.

1. Navigate to Menus | Menu Manager. Click on New.

2. In the Menu Manager: Add Menu screen, enter a title name in the Title field; this is the name that can be displayed with the menu. Fill the Menu type field too; this is the name that Joomla uses to identify the menu and it won't be visible on the frontend. When you enter a name, Joomla will save it without spaces or special characters. In the following example, we have entered About CORBA both as menu Title and Menu type. After clicking on Save, you'll notice the Menu type text has automatically changed to about-corba, as shown in the following screenshot:

   

3. Description is optional although it can be...

Time for action – moving hyperlinks to the new menu

One way to fill a new menu is by creating brand new links (Menus | About CORBA | New). In this case, however, we'll move three existing links from Main Menu to our new menu:

1. In Menu Manager, locate the Main Menu. Click on the name Main Menu to edit it.

2. Select the menu items you want to move to the new menu. In this example, we've selected Who are CORBA? and Mission Statement. At the top of the screen, click on the Batch button to move the menu items.

   

3. A pop-up screen called Batch process the selected menu items appears. In the Select Menu or Parent for Move/Copy drop-down list, go to About CORBA | Add to this menu. The text in the drop-down list changes to Add to this menu, as shown in the following screenshot:

   

4. Click on the Process button. A message is displayed: Batch process completed successfully.

5. Click on Menus in the menu on the left-hand side to switch to the Menu Manager: Menus screen. This now displays two items in the Published column...

Time for action – telling Joomla! where to display the menu

To actually get the new menu to show up on the site, you have to create a menu module. The module is the functionality block that contains your menu, and that's needed to be able to display menu contents. Let's tell Joomla where you want it to show the menu:

1. Go to Menus | Menu Manager to see all menus. Locate the About CORBA menu. Click on the Add a module for this menu type link, found in Modules linked to the Menu column. (Actually this is a shortcut to Module Manager—it saves you a few clicks in navigating to Extensions | Module Manager, clicking on New, and then selecting Menu.)

   

2. In the Module Manager: Module Menu screen, enter Title for the menu: About CORBA. Select Position: Right [position-7]. This will make the new menu appear in the same column as Main Menu.

3. Click on Save and then on the View site. There you are! A separate menu appears. The new About CORBA menu is displayed in the right-hand side column:

   

4. You're almost there...

Using the horizontal drop-down menu as the main menu

In Joomla 3.5, the horizontal top menu is in fact the most important site menu. Not only is it visually prominent, it's also the menu that will remain visible even if the website is shown on the small screen of a smartphone or tablet computer. Joomla's default template, Protostar, is set up to automatically adapt to such small screens. However, the content layout does change when the site is displayed on a smaller screen—you can try that out now by resizing the browser window:

As you can see, the top menu remains visible, but the right-hand side column (containing the This Site menu) has disappeared. In fact, the right column content is still there, but you need to scroll down all the way to the bottom of the screen to see it.

This means that in our current site (using the default site template), it would be better if we were to use the top menu as our default site menu. Right now, that's not the case, but it's easy to assign the contents...

Time for action – displaying Main Menu links in Top Menu

Let's set the Top menu module to show the Main Menu contents:

1. Go to Extensions | Module Manager. Locate the menu module named Top and click on its name to edit it.

2. Click on the Select Menu drop-down box to select Main Menu (instead of the current selection, Top):

   

3. Make sure End Level is set to All and set Show Sub-menu Items to Yes. This way, the menu will display submenu links, not just the main level links. Save your changes.

Have a look at the frontend to see the output. As you can see, the Top menu now displays the contents of Main Menu. Hover your mouse over the News link to see whether the drop-down links are working—even if there's only one submenu link right now: the News Archive link.

Have a go hero – cleaning up menus and menu links

At this moment, the site contains two menu modules displaying the same menu contents. Both the Top menu module and the menu module called This Site display the contents of Main Menu. You can easily correct...

Exploring menu module settings

While creating or editing a menu module, the module details and options allow you to control exactly where the menu is shown and how it displays. In many cases, the default settings will do—but if you really want control over your menus, it's a good idea to explore the wide range of additional possibilities. In the Module Manager, click on the menu name (such as This Site or About CORBA). The Module Manager: Module Menu screen appears as follows:

Switching to the menu module screen

You've just seen how you can edit menu properties by navigating to Extensions | Module Manager and finding the appropriate menu module. However, we've seen there's also a shortcut available that takes you straight from Menu Manager to the corresponding menu module settings:

In the Linked Modules column, click on the link to the menu module. Usually, there will be just one linked module available; however, if you use more instances of the same menu in different module positions, these...

What types of menu links are available?

Until now in this chapter, we focused on creating menus and tweaking menu display and settings. Of course, menus are about the actual hyperlinks that they contain. Earlier in this book, you created several menu links, for example, to create category overview pages. However, when creating menu links, you saw that Joomla offers you an impressive list of other menu item types to choose from. Let's have a closer look at the available types.

You're already familiar with the basic steps taken to create a menu link: navigate to Menus, click on the name of the menu, and click on New (or on the Add New Menu Item fly-out menu). When selecting Menu Item Type, you'll see a list of headings, as displayed in the following screenshot. Click on any of these headings (such as Articles) to reveal the available menu item types.

Note

The list of menu item types can be different in your particular Joomla installation. After you've installed a component that contains its own...

Creating plain text links

Sometimes, you'll want to show hyperlinks that are not part of a menu, but are embedded in an article text. To create these, use the Article button at the bottom of the article editor screen:

This makes adding links very straightforward. Let's find out how it works.

Time for action – creating text links

We'll create an internal hyperlink—a text link from one page to another page on the same site. Perform the following steps:

1. Go to Content | Article Manager and open the article that you want to add a link to.

2. Place the mouse cursor in the article text, on the position where you want to insert the hyperlink. Don't select any text, as this would be replaced by the link text you are about to insert.

3. Now click on the Article button at the bottom of the editor screen. A pop-up screen appears, listing all articles on the site. Click on the title of the article you want to link to (in this example, An Introduction to Bad Abstract Paintings):

   

4. The pop-up screen is closed. You're done! A link to the target article is inserted as follows:

   

5. Let's tweak the link text a little. By default, it consists of the target article title. To change this, you can edit the hyperlink text just as you would any other text in the article editor screen. However, if you want to replace...

Summary

In this chapter, we learned a lot about creating user-friendly navigation through Joomla menus. We learned that:

New menu links are added at the bottom of the list. To change menu item order, you move links up or down in the menu item manager.

Menus can be more than one level deep. By assigning a parent item to a menu link, you create a submenu item.

You can move links that don't fit the main menu to a separate menu. You can also create interrelated menus, such as a main menu showing parent links and a secondary menu that automatically shows child links.

Submenus aren't the only way to make secondary content visible. Main links can point to overview pages with (automatically generated) links to category content.

To create hyperlinks in an article to another article, use the Article button in the editor screen.

You've now finished making a basic, functional, and easy-to-navigate website. In the following chapters, we'll take things further—after all, dynamic, database-driven CMS magic doesn...