Customizing the Menus Menu in Joomla!

Exclusive offer: get 50% off this eBook here
Building Websites with Joomla! 1.5

Building Websites with Joomla! 1.5 — Save 50%

The best-selling Joomla! tutorial guide updated for the latest 1.5 release

$26.99    $13.50
by Hagen Graf | April 2008 | Joomla! MySQL Content Management Open Source PHP

There are numerous menus in the front end of every application. They are often displayed as standalone boxes. The menu items are generally arranged one below the other. Menus can also be integrated into the design horizontally so that at first sight they aren't even recognizable as cohesive menus. CSS menus, which can even be transparent, are very cool.

These menus and the menu links are dynamically administered in Joomla! from database content in the Menus work area. Joomla! has six different menus in the sample data. (main menu, top menu, other menu, user menu, example pages, and key concepts) In this article by Hagen Graf, we will discuss administering, creating and managing menus in Joomla!

The Top Menu is a horizontal menu; the other menus are vertical. Each menu is coupled with a so-called module, which is administered in the module manager.

Menus

By clicking on this menu item, you get an overview of the available menus. You can also access the content of these menus by means of the menu bar—Menus | Main Menu, Top Menu, or by clicking the respective menu link in the overview. This Menu Manager serves as an overview and shows you the number of Published and Unpublished menu items, the number of menu items that are in the Trash can, and the respective menu ID. In this section you can, for instance, copy a menu or create a new one.

Customizing the Menus Menu in Joomla!

Customizing an Existing Menu

Experiment a little with the menus to get a feel for things. The following edit steps are same for all the menus. Go to the menu item Menus | Main Menu. You will see a listing of the menu items that turn up in the mainmenu.

Customizing the Menus Menu in Joomla!

Several functions can be executed in the table with a simple mouse click. By clicking on the checkmark, you can enable or disable a menu link. You can change the order of the items by clicking on the triangles or by typing numbers into the fields under Order. If you use the numbers method, you have to click on the disk symbol in the header in order to make the change effective. In the Access Level column, via mouse click you can decide whether the menu is available to all users (Public), only to registered users (Registered), or only to a particular circle of users (Special). The menu items are then displayed or hidden, independent of the user's rights.

Menus Icon

If you click on this icon, you are taken to the menu overview screen.

Default Icon

The menu item that is marked as default here with a star is displayed as the start page when someone calls up the URL of your website. At the moment this is the menu item Home, but you can designate any element that you want as the start page. Just mark the checkbox and click on the Default icon.

Publish/Unpublish Icon

The status of a content element can either be published (activated) or unpublished (deactivated). You can toggle this status individually by clicking the green checkmark and/or the red cross, or marking the checkbox and subsequently clicking on the appropriate icon. If you follow the later method, you can toggle several menu items at the same time.

Move Icon

This entails the moving of menu entries. Let's move the text More about Joomla! into the top menu. Select the respective menu elements or even several menu elements and click the Move icon. This opens a form, listing the available menus. On the right you will see the elements that you want to move:

Customizing the Menus Menu in Joomla!

Select the menu into which you would like to move the marked menu items. Here, we have moved More about Joomla! from Main Menu into the Top Menu. You can admire the results in the front end.

Customizing the Menus Menu in Joomla!

Copy Icon

You can also copy menu items. To do that, select one or more menu items and click on the Copy icon. Just as with moving, a form with the available menus opens. Select the menu into which you want to copy the marked menu entries.

Trash Icon

In order to protect you from inadvertently deleting items, when editing them you cannot delete them immediately; you can only throw them in the trash. To throw them into trash can, select one or several menu elements and click on the Trash icon. The marked menu items are then dumped into the trash can. You can display the content of the trash can by clicking on Menus | Menu Trash.

Edit Icon (Edit Menu Items)

Here you can modify an existing menu, for instance the Web Links. After clicking on the name Web Links you will see the edit form for menu elements:

Customizing the Menus Menu in Joomla!

The form is divided into three parts.

  •    Menu Item Type
  •    Menu Item Details
  •    Parameters

Menu Item Type

Every menu item is of a particular type. We will get into greater details when we create new menus. For instance, a menu item can refer to an installed Joomla! component, a content element, a link to an external website, or many other things. You can see what the type of the link is in this section; in our case it is a link to the Joomla! weblinks component, and you can also see a button with the label Change Type. If you click on that button, you get the following screen:

Customizing the Menus Menu in Joomla!

This manager is new in Joomla! version 1.5 and really handy. In version 1.0.x there was no option to change the type of a menu item. You had to delete the old menu item and create a new one. Now you can change the display to a single category or to a link-suggestion menu item, with which you invite other users to suggest links. Now close this; we will get back to it when we create a new menu.

Menu Item Details

It contains the following options:

ID: Everything in an administration requires an ID number and so does our menu item. In this case the menu item has the ID number 48. Joomla! assigns this number for internal administration purposes at the time the item is created. This number cannot be changed.

Title: This is the name of the menu and it will be displayed that way on your website.

Alias: This is the name of the search-engine friendly URL after the domain name. When this is enabled, the URL for this menu will look as follows: http://localhost/joomla150/web-links

Link: This is the request for a component, in other words also the part of the URL after the domain name with which you call up your website. In this case it is  index.php?option=com_weblinks&view=categories

Customizing the Menus Menu in Joomla!

Display in: With this you can change the place where the item is displayed; in other words you can move it to another menu. The options field presents you with a list of the available menus.

Parent Item: Of course menus can also contain nested, tree-like items. Top means that the item is at the uppermost level. The rest of the items represent existing menu items. If, for instance, you classify and save Web Links under The News, the display on the item list and the display on your website are changed. The following figures show the change. The menu item Web Links has now moved into The News on your website. So you have to first click on The News in order to see the Web Links item. Your website can easily and effectively be structured like a database tree in this manner.

Customizing the Menus Menu in Joomla!
Customizing the Menus Menu in Joomla!

Published: With this you can publish a menu item.

Order: From the options list, you can select after which link you want to position this link. Access Level: You can restrict users that can see this list.

On Click, Open in: A very handy option that influences the behavior of the link. The page is either opened in the existing window or in a new browser window after clicking. You can also define whether the new window will be displayed with or without browser navigation.

Parameters The possible parameters of a menu item depend on the type of the item. A simple link, of course, has fewer parameters than a configurable list or for example the front page link. In this case we have a link to the categories. The number and type of parameters depend on the type of the menu item. You can open and collapse the parameter fields by clicking on the header. If the parameter fields are open, the arrow next to header points down.

Parameters–Basic The basic parameters are the same for all menu links.

Customizing the Menus Menu in Joomla!

Image: Here you can specify an image that must be in the root directory of the media manager (/images/stories/). Depending on the template, this picture is displayed on the left, next to the menu item.

Image Align: You can decide if the image should be on the left or right.

Show a Feed Link: It is possible to create an RSS feed for every list display in Joomla! 1.5. This could be desirable or undesirable depending on the content of the list. In this case, with list displays, RSS feed links that contain the list items are enabled in the browser.

Building Websites with Joomla! 1.5 The best-selling Joomla! tutorial guide updated for the latest 1.5 release
Published: March 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Parameter—Component

This section of parameters deals explicitly with the component addressed in the link, in this case the Web Links component. It consists of several levels. When we first click it, the available categories and a default text are displayed in our configuration.

Customizing the Menus Menu in Joomla!

If you click on Joomla! Specific Links, you will see a table with the respective links:

Customizing the Menus Menu in Joomla!

You can change this construct in the component-specific parameters:

Customizing the Menus Menu in Joomla!

Description: The header above the categories can be displayed or hidden with this.

Web Links Introduction: You can assign an individual header with this:

Customizing the Menus Menu in Joomla!

Hits: The visitors' hits on the respective links of your pages are tracked in the hits column. You can display or hide this hits column.

Link Descriptions: With this you can display or hide the description that is below a link in the link list.

Other Categories: When you are in the links table display, you will either see the default text or the texts that you have set up in the parameters. Below that, there is a list of usable categories and sections (if there are other categories). This list can be displayed or hidden.

Table Headings: With this option you can display or hide table headers above the links.

Parameters—System

Customizing the Menus Menu in Joomla!

You will find additional parameters here that influence the appearance of the link.

Page Title: Here you can enter text for the page title; this will be displayed in the top bar on the website and in the browser.

Show the Page Title: This is where you decide to display or to hide the page title.

Page Class Suffix: You can enter a text string here, for example my_menuitems. This description is then appended to the class name in the HTML code. You have to set up a corresponding class in the CSS file so that the block will appear with a different design.

SSL Enabled: Here you can select whether the created link supports the secure HTTPS protocol. This selection requires a functional SSL environment on your server. The SSL encryption works without any problems on your local XAMMP Lite environment.

New Icon

This icon is used to create new menus. We will learn about this in the section Creating a New Menu

Menu Trash

The trash can collects your deleted menu items:

Customizing the Menus Menu in Joomla!

If you select the deleted elements and click the Restore icon, you can retrieve them all from the garbage can:

Customizing the Menus Menu in Joomla!

If you click on the Delete icon, they are all irretrievably deleted.

Creating a New Menu

In this section, we will create a new menu named Joomla! 1.5 Book with a link to http://www.joomla.org/, which is to be displayed in a new window. We want it positioned on the left side below the main menu.

Go to Menus | Menu Manager | New and enter the internal name of the menu in the Menu Type field. Make sure that you pick a meaningful name without spaces. Type the name that you want to be displayed later on your website into the Title field. The menu consists of the internal, actual menu into which you can add menu links and a corresponding module, which can be positioned later.

Customizing the Menus Menu in Joomla!

Unique Name: This is the name that Joomla! uses in the code. You are not allowed to use any spaces. Here we are using joomla_book. This name will not be shown on the website; it strictly exists to create a link between the menu and the module.

Title: The name of the menu. Here it is Joomla! 1.5 Book (with the spaces).

Description: A description of the menu. This description is only displayed internally, in the back end, for instance in the display of lists.

Module Title: The name of the module—Joomla! 1.5 Book here as well. After you click on Save, Joomla! creates a new module with the specified parameters. You are redirected into the menu overview and you will see a new menu there that is still empty of items

Customizing the Menus Menu in Joomla!

If you click on the pencil icon on the right, next to the Joomla! 1.5 Book link, you will end up in the overview screen for the content of the Joomla! 1.5 Book menu.

Customizing the Menus Menu in Joomla!

Since there isn't any content yet, click on the New icon. You can now select the menu item type from different areas on the selection screen, which appears now. Since we are still in infancy with our Joomla! knowledge, let's just insert a simple external link to an external website.

Customizing the Menus Menu in Joomla!

To do that, click on the External Link button. You can now define the details and the parameters of the link.
Title: The name of the link that appears in the menu (Joomla! Project Website)

Customizing the Menus Menu in Joomla!


Parent Item:
Since this is the first item, there are no parent elements yet.

Alias: Name of the short URL (joomla-project).

Link: The link to the page (http://www.joomla.org).

Display in: Of course in our new Joomla! 1.5 Book menu.

Published: Click on Yes for the menu to be published.

Order: Since this is the first item, there is no order yet. New items are put at the end by default. The order can be changed after the first save.

Access Level: Should this menu item be visible to our Public (visitors), Registered, or Special groups?

On Click, Open in: What should happen when someone clicks on the link? Should the target be displayed in the same browser window, a new browser window with navigation, or a new browser window without navigation? When you click on Apply, your information is saved. If you click on Save, your information is saved and the dialog is closed.

You have just created a menu and provided it with a link. But before it can be displayed in the front end, you will have to publish the newly created module. In the menu, click on Extensions | Module Manager and there on the red cross in the Activated column. You can position the new menu below the main menu by using the triangles.

Customizing the Menus Menu in Joomla!

If you call up your website now, your new menu Joomla! 1.5 Book menu should appear.

Customizing the Menus Menu in Joomla!

Unfortunately your menu looks different than the main menu above it. The blue border is missing. That attribute is defined in the CSS file of the template and can, of course, be modified. For that, the module has to invoke a particular CSS class. In our case, the class with which our menu is displayed is called module. You can check that by taking a look at the HTML source code of the website:

<div
class="module"><div><div><div>
<h3>Joomla!
1.5 Book</h3>
<ul
class="menu">
<li
class="item54">
<a
href="http://www.joomla.org"
target="_blank">
<span>Joomla! Project
Website</span>
</a>
</li></ul></div></div></div></div>

The main menu, on the other hand, invokes the class module_menu. Source code for the main menu:

<div
class="module_menu"><div><div><div>
<h3>main
menu</h3>
<ul
class="menu">
<li id="current" class="active
item1">
<a
href="http://localhost/joomla150/">
<span>start
page</span>
</a>
</li>
...
additional links
...
</ul>
</div></div></div></div>
</ul>
</div>

During the editing of the module, you can ensure that the new menu also invokes that class. Click on Extensions | Module Manager | Joomla! 1.5 Book. Simply enter the missing text, _menu, into the Module Class Suffix field.

Customizing the Menus Menu in Joomla!

After this modification, your menu will be displayed the way you wanted. If you click on the Joomla! 1.5 Book link now, a browser window with navigation should open and the website of the project should appear.

Customizing the Menus Menu in Joomla!

Summary

In this article we saw how to customize the Menus menu.

Building Websites with Joomla! 1.5 The best-selling Joomla! tutorial guide updated for the latest 1.5 release
Published: March 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Books From Packt


Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Joomla! 1.5 Content Administration
Joomla! 1.5 Content Administration

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

Joomla! with Flash
Joomla! with Flash

Joomla! Web Security
Joomla! Web Security


Your rating: None Average: 4 (7 votes)
Question on menu items by
Thanks for all the detailled explanations. Helped me a lot to customise my menu. However my template is too long to load: http://www.belleza-chic.com and I'm working on a new template (quick one afterburner) on http://www.belleza-chic.com/test but I can't set up my menu item properly. I'm not sure how to relocate my main menu to appear on the nav position?? thanks for any help
menu creation info by
Thanks for this topic. some info are missing (menu creation): - What is the difference between these types of menu items when we create new items. - What about sub-menus.
Picture/Form link by
Hi ! My question is: I have a picture gallery and want to, once clicked, it open a HTML Form with the subject for this picture, so I dont have to worry WHICH picture the client choose. Thanks for any help ! LAO http://laomusic.br.ms
change menu orientation and contents by clicking on menu item by
hi there, what would be the best aproach to do the following: i am creating a bi-lingual site, hence the menu will be presented both in English as well as in Arabic. I need to have a menu link on the default page so that when clicked will display a totally different page that has the present the other language. say, the default page has English menu and one item on its top is "Arabic" when pressed it will go to another page that has all menu items in Arabic and orientation of the whole page is in RTL direction. I will have other requests :) but they will come along later... Thanks,
Read more option disable the submenu module by
Can any one help me out to solve the problem of disappearing the submenu module after clicking the read more of article..?
menu items not visible...... by
I am experiencing a strange problem: I have made a backup of a Joomla site and restored that (mysql export of the database and import on another server, as well as copying the site itself to the other server). The site works ok, but in the admin interface, when I go to the menu manager and try to edit menu items, none are visible. Can anyone tell me why not?

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
z
h
h
W
X
P
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