www.joomlabest.com

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.

Unique Name: This is the name that Joomla! uses in the code. You are not allowed to use any spaces. Here we are using j ooml a_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.

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.

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.

To do that, click on the External Link button. You can now define the details and the parameters of the link.

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.

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.

To do that, click on the External Link button. You can now define the details and the parameters of the link.

Parent Item: Since this is the first item, there are no parent elements yet. Alias: Name of the short URL (j oomla-proj ect).

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.

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.

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

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.

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.

Summary

In this chapter we saw how to customize the Menus menu. In the next chapter we will learn about the Content menu.