Menus and content in Joomla! are closely intertwined. If you have experience building websites the old fashioned way, menu links don't just point to existing pages, as you might expect. When adding a menu link, you don't just tell Joomla! what page the menu link should point to, but you rather instruct it to make that page. By creating menu links, you created different types of pages.
However, to your visitor, Joomla! menus are no different from other website menus. To your visitor, menus should provide an easy means of navigation.In this article, 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 settings. Let's find out how we can enhance menus and improve the navigability of the site.
How many menus can you have?
On any Joomla! website you can create as many menus as you want. The default sample site is a good example as it contains no fewer than six menus. On the home page four of those are shown: the horizontal Top Menu, the Main Menu, the Resources Menu, and the Key Concepts Menu. In the backend, all of the menus are listed in the Menu Manager (Menus | Menu Manager).
At least one menu, the Main Menu, is needed for Joomla! to function properly. The other ones, such as the Top Menu (the top horizontal menu) and the User Menu (a menu that's only visible after users have logged in), are only there to showcase Joomla!'s menu possibilities. In real life you'll probably just confuse your visitors with that amount of navigation options popping up on different pages and places.
However, it's great to be able to create as many menus as you like. This allows you to set up different menus for different functions and different users. You can have a main menu (at the top of the page) containing primary links, and another menu (somewhere down the page) containing secondary links. You might also want to have a special menu with action links (such as Login, and Register) and another menu that's only shown to visitors who have logged in.
Menus are modules (and why that's important)
You've already seen some examples of modules in action, such as the Poll module. Remember, modules are Joomla!'s magic building blocks that can contain all kinds of functionality. Menus are modules too. In fact, every new menu you add is a new instance of the mod_mainmenu module. This makes menus very flexible. Not only can you have as many menus (menu modules) on your site as you like, but you can also tell Joomla! exactly where (on what part of the screen, in which module position and when (on which specific pages, for which specific users) you want these menus to show up.
Sounds confusing? Don't worry, we'll practice adding and customizing menus in this article series—and once you get the hang of it, you'll really appreciate Joomla!'s amazing menu flexibility.
Creating user-friendly navigation: Cleaning up the Main Menu
When building a site, you'll start by adding links to the Main Menu. It's the mandatory menu that 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 SRUP example site already contains eight links. When you find the Main Menu gets long and messy, what options do you have to improve site navigation?
Option 1: Change the order of menu items
By default, a new menu item is added to the end of the existing menu. If you were to add a new link called New Menu Item, it would show up at the bottom:
In our example site we've haven't paid much attention to menu item order. However, the order in which you add items isn't necessarily the order in which you want them to be displayed to your visitor.
Time for action—change menu item order
On the SRUP example site main menu there are eight menu items (as you've just seen in the previous screenshot). Let's move things around to present the links 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.
- Navigate to Menus | Main Menu.
- In the Order column, enter numbers to reflect the desired order of menu items.
- Click on the little disc icon on the top row of the Order column to apply the new order.
What just happened?
The menu items now show up in the order that you've chosen. News and Who are SRUP? have been moved up from their humble position. On the frontend you can see that the order of items has changed:
A quick way to change the position of multiple menu items is to enter the desired order by numbers, as you've just seen. If you only want to move one or two menu items up or down you can also click on the green up and down arrows in the Order column.
Option 2: Add a separate new menu
Rearranging menu items is a first step—but there are definitively more powerful ways to improve a menu. You can also clean up a menu by removing links that don't really fit in, and create a separate menu for these links that you can show somewhere else on the page. This way, you can either emphasize those links in the visual hierarchy of the web page—or you can choose to make them less prominent.
Let's have a look at the SRUP Main Menu items. Imagine your client has asked you to reorganize the navigation to enable visitors to quickly find the information on ugly paintings that this site is about. As the current Main Menu is rather long, it's difficult for the visitor to distinguish between links on actual ugly painting contents and links on the organization behind the site A good solution would be to create a separate menu on SRUP-related contents.
Time for action—step 1: Create a new, empty menu
In the Main Menu of the example site, three items are suited to be shown in another menu. These links are of interest to visitors who want to know more are about the SRUP organization. Let's create a new menu "About SRUP" so that we can move the menu links Who are SRUP?, Mission Statement, and Contact there.
- Navigate to Menus | Menu Manager. Click on New.
- In the Menu : [New] screen add a Unique name. This is the name that Joomla! uses to identify the menu; it won't be visible on the frontend. Enter a name without spaces or special characters. In the following example, we have entered aboutsrup:
- Enter the Title; this is the name that may be displayed with the menu. Enter a Description and a Module Title too. The Module Title will show up in the Module Manager.
- Click on Save. You'll be taken to the Menu Manager. At the bottom of the list you can see a new entry. The menu About SRUP has been created:
What just happened?
In the Menu Manager you've created new menu. It's visible in the Joomla! backend—but of course it's still empty.
Time for action—step 2: Move hyperlinks to the new menu
One way to fill a new menu is by creating brand new links (Menus | About SRUP | New). In this case, however, we'll move three existing links from the Main Menu to our new menu:
- In the Menu Manager, locate the Main Menu. Click on the icon in the Menu Item(s) column next to it to edit it.
- Select the menu items you want to move to the new menu. In this example, we've selected Who are SRUP?, Mission Statement, and Contact.
- Click on the Move button in the toolbar.
- In the next screen, select the destination menu. In the Move to Menu: list, select aboutsrup and click on the Move button to confirm.
- The Menu Item Manager screen now displays three new items in the About SRUP menu:
- Let's put critical content links in the highest position. In the Menu Item Manager, click on the arrows in the Order column to rearrange the items in this order:
- Who are SRUP?
- Mission Statement
What just happened?
Everything is set up fine now; the new About SRUP menu contains the desired hyperlinks in the desired order. There's just one thing left to do now—make it visible on your website.
Time for action—step 3: Tell Joomla! where to display the menu
To actually get the menu to show on the site, you edit the settings of the appropriate menu module. The module is the "functionality block" that contains your menu. Let's tell Joomla! where you want it to show:
- Navigate to Extensions | Module Manager and locate the new module, About SRUP. Click on the Module Name to edit the module:
- In the Module: [Edit] screen, select Enabled: Yes. This sets the menu to show. Leave Position: set to left for now. This will make the new menu appear in the same column as the Main Menu.
- Click on Apply and click on Preview. There you are! A separate menu appears. The new About SRUP menu is displayed at the top position in the left-hand side column:
- In the Details section, there are two settings that control where the menu will turn up on the frontend. Again, we'll leave Position set to left (to keep the menu in the left-hand side column). In the Order drop-down box, the current value is 0: About SRUP. The number indicates that the menu is now the top item in the left position. To change this value, select 2: Main Menu. This will position the new menu below the Main Menu.
- Click on Apply and then on Preview to check that the secondary menu is now published in the right place:
What just happened?
In this example, we've chosen to take three links out of the main menu and show them in a separate menu. We've succeeded in cleaning up the previously overcrowded Main Menu; it now shows just five main links. All links that point to content about the SRUP organization have been moved to a separate menu.
More on menu module settings
Up to now, you've use the menu module settings screen (the Module : [Edit] screen) only to adjust the position of the menu on the web page. However, there are dozens of other menu module settings that you can tweak to your liking. See the Exploring menu module settings section later in this article series for a full overview.
Tweaking the menu styling
You'll have noticed the second menu (the About SRUP menu) has a different style from the Main Menu. If you want both menus to share the same styling, navigate to Extensions | Module Manager | About SRUP. Navigate to the Advanced Parameters and look up the Module Class Suffix box. By default, it's empty. Enter _menu as Module Class Suffix. Click on Apply and then on Preview. The two menus now share the same styling. In the default Joomla! template, modules with the suffix _menu will display the specific formatting that's reserved for menus:
The rhuk_milkyway template is set up this way. Its stylesheet contains specific menu styles, ending in the suffix _menu (such as module_menu instead of just module). By adding the _menu Module Class Suffix to this module we make use of these specific styles—and our menu will be formatted accordingly.
Don't worry if you don't like the default formatting of the Joomla! Main Menu and submenu. Many templates allow for attractively styled menus. If you have some CSS coding skills you can edit the menu styles yourself.
If you have read this article you may be interested to view :
- Managing Menus in Joomla! 1.5: Part 2
- Adding Image Content in Joomla!
- Managing Image Content in Joomla!
- Managing Your Joomla! Media Files with Media Manager
- Media File management in Joomla with FTP and Third-party Extensions
- Building Form Applications in Joomla! using CK Forms
- Building a Calender Application in Joomla! using Fabrik