Managing Menus in Joomla! 1.5: Part 1

Exclusive offer: get 50% off this eBook here
Joomla! 1.5: Beginner's Guide

Joomla! 1.5: Beginner's Guide — Save 50%

Build and maintain impressive user-friendly web sites the fast and easy way with Joomla! 1.5

$26.99    $13.50
by Eric Tiggeler | February 2010 | Beginner's Guides Joomla! MySQL Content Management Open Source PHP Web Development

In this article series by Eric Tiggeler, author of Joomla! 1.5: Beginner's Guide, you'll learn how you can help the visitor to find what they want easily on your website by designing clear and easy navigation through menus.

Here, you'll learn the following:

  • Adding a new menu
  • Creating submenus
  • Adjusting menu module settings
  • Creating hyperlinks in article texts

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).

Managing Menus in Joomla! 1.5

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:

Managing Menus in Joomla! 1.5

Managing Menus in Joomla! 1.5

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.

  1. Navigate to Menus | Main Menu.
  2. In the Order column, enter numbers to reflect the desired order of menu items.
  3. 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:

Managing Menus in Joomla! 1.5

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.

  1. Navigate to Menus | Menu Manager. Click on New.
  2. 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:

    Managing Menus in Joomla! 1.5

  3. 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.
  4. 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:

    Managing Menus in Joomla! 1.5

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.

Joomla! 1.5: Beginner's Guide Build and maintain impressive user-friendly web sites the fast and easy way with Joomla! 1.5
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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:

  1. In the Menu Manager, locate the Main Menu. Click on the icon in the Menu Item(s) column next to it to edit it.
  2. 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.
  3. Click on the Move button in the toolbar.
  4. In the next screen, select the destination menu. In the Move to Menu: list, select aboutsrup and click on the Move button to confirm.

    Managing Menus in Joomla! 1.5

  5. The Menu Item Manager screen now displays three new items in the About SRUP menu:

    Managing Menus in Joomla! 1.5

  6. 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
    • Contact

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:

  1. Navigate to Extensions | Module Manager and locate the new module, About SRUP. Click on the Module Name to edit the module:

    Managing Menus in Joomla! 1.5

  2. 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.

    Managing Menus in Joomla! 1.5

  3. 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:

    Managing Menus in Joomla! 1.5

  4. You're almost there! We've got our new menu showing up in the left column, but we obviously want it to appear below the Main Menu to establish a better visual hierarchy. This takes just one extra step. If you've clicked out of the module editing screen, navigate back to Extensions | Module Manager and select the About SRUP module to edit the menu again.

  5. 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.
  6. Click on Apply and then on Preview to check that the secondary menu is now published in the right place:

    Managing Menus in Joomla! 1.5

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:

Managing Menus in Joomla! 1.5

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.

>> Continue Reading: Managing Menus in Joomla! 1.5: Part 2

 

If you have read this article you may be interested to view :

Joomla! 1.5: Beginner's Guide Build and maintain impressive user-friendly web sites the fast and easy way with Joomla! 1.5
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Eric Tiggeler

Eric Tiggeler is the author of the Joomla! 3 Beginner's Guide and has written several Dutch guides on Joomla! and other content management systems, all of which got excellent reviews. Eric writes tutorials for several computer magazines and Joomla! community websites. Over the last ten years, Eric has developed numerous websites, big and small, many of them using Joomla!

Eric is fascinated by the Web as a powerful and creative means of communication, and by revolutionary software such as Joomla!, which enables anyone to create beautiful and user-friendly websites. His passion is making complex things easy to understand.

Books From Packt

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

WordPress 2.8 Themes Cookbook
WordPress 2.8 Themes Cookbook

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 Content Administration
Joomla! 1.5 Content Administration

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5 Development Cookbook
Joomla! 1.5 Development Cookbook

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

MediaWiki 1.1 Beginner's Guide
MediaWiki 1.1 Beginner's Guide

Your rating: None Average: 5 (2 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
4
z
f
t
1
N
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software