Managing Menus in Joomla! 1.5: Part 2

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

Read Managing Menus in Joomla! 1.5: Part 1 here.

Time for action—tweak the menu position and orientation

Placing a second menu in the left-hand side column makes it very prominent. You might notice that site visitors find this second menu distracting. And after all, the static links to information about SRUP aren't really that important. Why not move the menu somewhere down the page? We'll publish the SRUP links as a horizontal menu at the very bottom.

By default, at the bottom of the screen there's a copyright notice. We'll start by removing this to make room for the new menu.

Removing the copyright notice involves deleting a few lines of code from the template HTML. If you want to move the menu to any other screen position you can skip the first three steps:

  1. Navigate to Extensions | Template Manager. Select the rhuk_milkyway template and click on Edit HTML.
  2. In the HTML editor screen, find and select the following code:
    <p id="power_by"> <?php echo JText::_('Powered by') ?>
    <a href="http://www.joomla.org">Joomla!</a>.<?php echo
    JText::_('Valid') ?> <a href="http://validator.w3.org/check/
    referer">XHTML</a> <?php echo JText::_('and') ?> <a href="http://
    jigsaw.w3.org/css-validator/check/referer">CSS</a>.</p>
  3. Press the Delete key to remove the selected code and click on Save. You can preview the frontend to check if the copyright notice has effectively disappeared.
  4. To have the About SRUP menu occupy the free position, we'll edit the menu module properties:

  5. Navigate to Extensions | Module Manager and click on the About SRUP menu module.
  6. In the Position drop-down box, select syndicate. This is the bottom most position in this template.

  7. In the Parameters section, click on Module Parameters and set the Menu Style to Legacy – Horizontal. This will make Joomla! display the links horizontally side by side in a table row.
  8. Click on Other Parameters. In the Spacer text box, enter a character to display in between the horizontal links. In this example, we'll enter two dashes. The effect is that the menu links will be displayed as follows:Who are SRUP? -- Mission Statement -- Contact
  9. Click on Apply and click on Preview. The menu has been moved to the bottom of the page:

What just happened?

We've just removed the copyright notice that by default appears at the bottom of the template. This creates room for a separate "About SRUP" menu. To get this menu to display at the bottom position we've changed its module position and the menu style (the links orientation) from the default values. The result is that the menu is now displayed as row of links at the bottom of the page. This makes them much less prominent. Only visitors looking for these links will really notice them.

This kind of presentation is a good choice for links that don't fit the main navigation menus. In this example, we've moved links on the organization behind the site to the bottom menu. In real life, it's common to publish static links there (such as About This Site, Disclaimer, and Sitemap).

Menu Manager or Module Manager?
To customize a menu, you'll sometimes use the Menu Manager, and sometimes use the Module Manager. What's the difference? The Menu Manager is used for everything that has to do with the contents of the menu. Anything to do with the display of the menu module you control through the module settings.

Option 3: Creating submenu items

There's still room for improvement in our Main Menu. Although there are now only five links left, the way they're organized might still confuse visitors. Having a News link and a separate News Archive link, both on the same menu level, is odd. Visitors will expect a News link in a main site menu, but News Archive shouldn't really be a top-level link. Joomla! allows you to add a secondary level to a menu so let's change News Archive into a secondary link that will only display after the News link has been clicked.

Time for action—create a secondary menu item

Let's remove the News Archive link from the primary level in the Main Menu and show it as a sublevel link:

  1. To edit the Main Menu contents, navigate to Menus | Main Menu.
  2. Click on the title of the item you want to edit, News Archive.
  3. In the Menu Item Details section, the parent item is set to top. Change the parent item to News:

  4. Click on Save. In the list of menu items in the Menu Item Manager, the new sublevel menu item is shown indented:

  5. Click on Preview to see the output on the frontend. The Main Menu now shows four primary links. When the visitor clicks on News, a secondary link News Archive is displayed:

What just happened?

By assigning a parent item to a menu link you can create a submenu item. Of course, submenus aren't the only way to make secondary content visible. The main links, can point to overview pages with links to content from sections or categories. Those "secondary home pages" can make secondary menu links superfluous.

However, sometimes it's better to add sublevels in the menu itself. If you have items outside of the section or category structure (such as uncategorized pages), submenus can clarify the coherence of the site. You can have main ("parent") links and secondary ("child") links.

Creating split submenus

When you want to use submenus on your site, you can also choose an altogether different presentation from what you've just seen. You're not limited to having submenu items shown within the main menu, as it's also possible to place main navigation links horizontally along the top of the page and display second level links in a separate menu (for example, in a vertical menu in the left-hand side column). This creates a clear visual distinction between the main menu items and their submenu items. At the same time the visitor can see that those two menus are related. The parent item can be displayed as "active" (using a different style or color) when the related submenu is displayed.

An example is shown in the following screenshot. The primary link, Activities, is shown in a (horizontal) main menu bar. When this link is clicked a separate submenu shows secondary links (submenu links) to two category overview pages (Meetings and Lectures):

How do you build this kind of menu system in Joomla!? In short, you create a copy of the main menu, set the original main menu to show only the top-level links, and set the copy to show only the second-level links. Joomla! will automatically display the appropriate submenu when the parent item is chosen in the top menu.

We won't add a split menu system to our example site as it doesn't have the amount of content that would justify an elaborate multi-level navigation. However, feel free to experiment on your own website, as this is a very powerful technique. The following are the required steps in more detail:

  1. Suppose you have created a Main Menu with two or more links to sublevel items. Navigate to Extensions | Module Manager. Select the Main Menu module and click on Copy.
  2. The same list now contains an item called Copy of Main Menu. Open that copy and enter another title (for example, Submenu). Select Position: left.
  3. In the Module Parameters, set the Start Level to 1 and the End Level to 1. This will make the menu display only second-level menu items.
  4. Now edit the Main Menu module to show only the top-level items. Set Start Level to 0 and End Level to 0.

The menu is done! The submenus now only display when the corresponding main-level link is clicked.

Have a go hero—arrange menus any way you like

Joomla!'s split menu capabilities allow you to design exactly the type of navigation that's appropriate for your site. You can place a row of main menu links at the top of the page and position secondary (submenu) links in the left-hand side or right-hand side column. Try to figure out what arrangement of main and secondary links fits your site best and how you can realize this in Joomla!. Here are a few suggestions (some common arrangements of site navigation) to get you going:

By default, Joomla's main menu links are displayed as a vertical row in the left-hand side column. How can you achieve a horizontal row of main menu links, as shown in the first three images above? Have a look again at the Time for action - Tweak the menu position and orientation earlier in this article. It shows the easiest way to change the menu orientation in Joomla!, selecting the appropriate Menu Style in the menu module editing screen. However, there are templates that are specifically designed to support horizontal menus. These contain the appropriate module positions and module styling for a main horizontal menu (and do a much better job at this than the default Joomla template).

Exploring menu module settings

When creating or editing a menu module, the module details and parameters 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 these settings provide. In the Module Manager, click on the menu name (such as Main Menu or About SRUP). The Module: [Edit] screen appears.

The three main sections of the Module: [Edit] screen are Details, Menu Assignment, and Parameters.

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:

Details

The Details section controls basic properties, such as the menu title and the menu position.

Properties

Description

Title

Enter the Title of the module, that can be displayed on the frontend.

Show Title

In many cases, you can set the Title to hide. After all, why should a main menu be called Main Menu? Web visitors recognize a menu when they see one. Only special function menus (Login) should show a title. In the example site, I've left it to show so that you can easily identify the Main Menu on the page, but in real life you should go ahead and unpublish it!

Enabled

Select Yes to show the menu module on the site, select No to hide it.

Position

Select the pre-defined position where you want the module to be displayed. The options you have here depend on the template you're using. Template designers can add as many positions as they like, giving you maximum flexibility in assigning positions to menus and other modules.

Order

There can be more than one module within a Position; by changing the Order setting, you can control the order of the modules in the Position you've selected. The drop-down box shows all modules in the current Position (for an example, see Changing the order of menu items earlier in this chapter)

Access Level

When you apply different access levels to different parts of your site, here you can determine who has access to this menu. When set to Public, every visitor can see the menu. Choose Registered to only give registered users access and Special to give only users with author status or higher to have access.

Menu Assignment

The Menu Assignment section allows you to control on which pages (through which menu links) the menu module will be accessible.

Properties

Description

Menus, Menu Selection

By default, a module will be shown on all pages. Choose Select Menu Item(s) from the List to make a selection in the Menu Selection box. This selection controls on which pages (that are linked to through the listed Menu Items) the module is displayed.

Module Parameters

You'll only have to edit the Module Parameters in some special situations.

Parameter

Description

Menu Name

The name you've entered when creating this menu in the Menu Manager. The default name is mainmenu.

Menu Style

The style determines which HTML code Joomla! generates to create a menu link list. The List option generates the most generally applicable code. Legacy - Vertical provides a vertical table; Legacy - Horizontal provides links in a horizontal table. Legacy - Flat List is an outdated method.

The image below shows an example of a menu in the default Joomla! example site, using the Legacy - Horizontal setting.

 

 

 

 

Start Level, End Level

Start Level and End Level allow you to split a menu showing primary links at the top of the page and secondary links in a split menu in some other position. See Creating Split Submenus earlier in this chapter for an example.

Always show sub-menu Items

Should submenu items be displayed even when the parent is not active (not selected)? Select No to have sub-menu items display only when the parent menu item is clicked.

Target Position

This is only relevant in some templates to specify the location of drop-down or pop-up menus.

Advanced Parameters

The Advanced Parameters, too, you'll probably only adjust in some special situations.

Parameter

Description

Show Whitespace

This setting doesn't have any effect on the way the page is displayed; it only affects the appearance of the source code. Should spaces be shown?

Caching

If you have set a caching value in the Global Configuration you can override it here for this module.

Menu Tag ID, Menu Class Suffix, Module Class Suffix

You can set the Menu Tag ID, Menu Class Suffix, and Module Class Suffix to tweak the layout of the menu. These options are only relevant if you want fine control over the layout of your menu through the CSS stylesheet.

Maximum Menu Depth

What's the maximum number of child menu levels you want the menu to show?

Other Parameters

The Other Parameters controls the display of menu images and some other menu display settings.

Parameter

Description

Show Menu Images, Menu Image Alignment, Menu Image Link, Indent Image

These settings are important if you want to show images next to individual menu items, such as an icon next to each main category link. The settings here control whether images will be displayed and if these images should function as hyperlinks.

Before you can get any images to display next to menu items, you should add these images for each separate menu item through the menu item's parameters. In the menu item's Parameters (System) section, use the Menu Image option.

Expand Menu

Submenu items are shown after the visitor has clicked on the corresponding main level link. Do you want to always display the submenu items? Select Expand Menu: Yes.

Activate Parent, Full Active Highlighting

By setting Activate Parent and Full Active Highlighting to Yes, the menu will give the visitors a better indication of where they are in the site. If the menu has sublevel links, Activate Parent ensures that the parent level is indicated as "active" when a sublevel link is chosen.

Full Active Highlighting allows the visitor to see where he is, on each page he visits-directions to the page he sees in the (active, otherwise styled) menu item Contact

Spacer, End Spacer

When using a horizontal menu, you can enter the character that should be shown between links. For example:

About Us | Contact | Site Policy

The end spacer is shown after the last horizontal menu item.

Have a go hero—try out available menu settings

In this article, you've seen how easy it is to create new menus, move links around, and place the menu anywhere on the page through the menu module settings. You might want to experiment a little; choose one of the menus on your site and try out some different module settings. Try, for instance, selecting other Menu Assignment settings; you'll see the menu will only display on the pages that you select.

Creating menu links

Up to now, we've focused on creating menus and tweaking menu display and settings. Of course, menus are about hyperlinks, so let's have a closer look at the way these are created and modified. As creating menu links is an essential activity in Joomla!, you're already familiar with the basic steps it takes to create these: navigate to Menus, click on the name of the menu, and click on New.

Every time you make a new link you're presented with an impressive list of Menu Item Types:

This list can be different in your particular Joomla! installation. After you've installed a component that contains its own new page types, these can show up in the Menu Item Type list too.

When building the example site you've added links using some different Menu Item Types. You've created links pointing to articles (Internal Link | Articles): some pointing directly to content pages and others pointing to article overview pages (section and category pages). You've also added a link through Internal Link | Contacts to add a special function page: a contact form.

But you'll have noticed there are many more hyperlink types, as the above image shows. Clicking on the items shown here will reveal even more subitems. These menu item types are not about different types of menu navigation, they are about creating different types of content. They represent different preset ways of displaying all kinds of content.

The following table provides a short overview of what these Menu Item Types mean and how you can use them. We won't go into the details (as these Menu Item Types are targeted on creating content), but it's a good idea to browse the menu options mentioned next to get a quick impression of what they're about.

What types of Menu Links can you create?

 

Name

What type of link is it?

Internal Link

A link within the current website.

Articles

A link to an article, a section or category overview page, or an article archive page.

Contacts

A link to a page with data from one or more contacts.

News Feeds

Link to a page with RSS feeds, new blocks of other sites.

Polls

Link to a page with a poll, a survey.

Search

Link to a page with the site search engine.

User

Links to pages for specific users, such a registration and login page.

Web Links

Link to a page with a collection of links to other sites.

Wrapper

Link to a page within this site that shows an external web page (within a frame).

External Link

Link to an external site.

Separator

Not a link, but a line used to visually separate different parts of the menu.

Alias

A copy of a link to an existing menu item.

Have a go hero—try out some Menu Item Types

The extensive list of Menu Item Types looks inviting; why don't you have a go at the different types of menu items? Add a new menu link to the main menu and choose a menu item type you haven't used yet. Check out the Search, External Link, or the Separator menu item types; they're pretty straightforward. Some others, such as the User link, are quite complex and won't immediately make sense—but don't worry, they won't mess up your site permanently and you can easily delete unwanted menu items in them again. In the course of this book, you'll learn to use many of these menu item types.

Why do you have to create menu links manually, anyway?

You might wonder why you have to add menu links yourself—isn't that a boring job? Well maybe, but creating menu links gives you a huge amount of control. Not only do you control the type of page the link points to, but also which links are displayed, in what order they appear, on what pages they show up, in which menu they appear, and so on. Moreover, you can choose a menu structure that doesn't have be identical to the site structure. If you want to link from the home page menu straight to a registration page, you can do that (even if that page isn't part of your main site structure). This way, you can limit the number of clicks and lead your visitors through your site easily.

And don't worry, you'll only make menu items pointing to the main pages and content groups—not to each and every page. Menus usually point to overview pages, some selected articles, and special function pages (such as a login form, contact form, search page). Joomla! will automatically create links to any amount of articles below the main levels, using overview pages.

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. How do you create these? It's doable, but it does take quite a few steps.

Time for action—creating text links

The SRUP website is in desperate need of an internal hyperlink from one page to another, a link from the Mission Statement page to the Ugly Paintings overview page. Let's create this link:

  1. Before you can create a hyperlink, you have to get the URL of the target page. Navigate to the Menus | Main Menu and open the target page to edit it.
  2. In the Link: field, select all of the text (press Ctrl + A) and copy it (press Ctrl + C).

  3. Now create a link to the URL you just copied. Navigate to Content | Article Manager and open the article that needs to contain the link in the editor. In this example, we've selected the Mission Statement article.
  4. Select the word or words that should be a hyperlink and click on the hyperlink icon in the editor:

  5. A pop-up screen appears. In the Link URL box, paste the target page URL and add a Title for the hyperlink. The Title will show up when the visitor hovers the mouse pointer on the link. In this example, we've entered Discover Ugly Paintings as link Title.

  6. Click on Update. The pop-up screen closes. In the editor screen, click on Save and click on Preview to see the results on the frontend.

Check out the article on the frontend to see if the text is now a hyperlink:

What just happened?

You've created a text hyperlink from an article to another page in the same site. You can only create a link to a page that has a menu link pointing to it. To be able to create a text hyperlink, you first have to explore the menu link of the target page and get the URL information you need.

In the previous screenshots, you can see the editor buttons and pop-up screens available when Joomla!'s default text editor, Tiny MCE, is set to Functionality: Extended. Although the normal functionality setting will do in most cases, you might want to consider activating these advanced options.

If you often need to add text links to articles, it's much easier to use another editor, the Joomla! Content Editor (JCE). Its approach is much more intuitive and it allows you to just click and select the target page (without first having to look up the target page URL).

Pop quiz—test your menu knowledge

  1. How many menus can you add to your website?
    1. Six Menus (the Main Menu and five other menus).
    2. As much as you want.
    3. You can only have one Main Menu.
  2. How can you add submenu items to a menu?
    1. By creating "parent links"and "child links".
    2. By assigning a different Parent Item to a menu link than the default (Home).
    3. By creating a new menu.
  3. When you create a new menu link, why does Joomla! show such a big list of Menu Item Types?
    1. To enhance navigation.
    2. To enable you to create new menus.
    3. To enable you to create different types of target pages.

Summary

In this article, we learned a lot about creating user-friendly navigation through Joomla! menus. This is what we covered:

  • By default, new menu links are added to the bottom of the menu link list. You can move menu links up and down in the Menu Item Manager.
  • You can set up a second menu that functions completely independent from the main menu. That way, you can move links that don't fit the main menu to a separate, less prominent position. You can create as much separate menus on your website as you like.
  • Menus can be more than one level deep. By assigning a parent item to a menu link, you create a submenu item.
  • You can also create interrelated menus, such as a main menu showing parent links and a secondary menu on a different page position 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 content from those sections or categories.
  • To create hyperlinks in an article text, you first have to retrieve the URL of the target page and copy it when creating a hyperlink in the article text editor.

You've now finished making a basic, functional, and easy to navigate website.

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 has authored several books on Joomla!, such as the highly successful Joomla! 2.5 Beginner's Guideand Joomla! 3 Beginner's Guide, both by Packt Publishing. He has also written several Joomla! guides in Dutch. His books have received excellent reader reviews. He also writes tutorials for several computer magazines and Joomla! community websites. Over the last ten years, he has developed numerous websites, big and small, using Joomla!.

He is fascinated by the Web as a powerful, creative, and ever-changing means of communication, as well as by the revolutionary software Joomla!, which enables anybody to create beautiful and user-friendly websites.

On a daily basis, he works as a consultant and copywriter at a communication consultancy company affiliated to the Free University of Amsterdam. Over the last few years, he has written more than 20 books in Dutch on writing and communication. His passion lies in making complex things easy to understand.

He is married, has two daughters, and lives and works in Hilversum, the Netherlands. On the Web, you'll find him at www.joomla.erictiggeler.nl(in Dutch) and www.joomm.net(in English).

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

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