Joomla cho người mới bắt đầu part 20 pps

Chapter 8
[ 197 ]
A quick way to change the posion of mulple 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 rst step—but there are denively more powerful ways to
improve a menu. You can also clean up a menu by removing links that don't really t 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 navigaon to enable visitors to quickly nd the informaon on ugly painngs
that this site is about. As the current Main Menu is rather long, it's dicult for the visitor to
disnguish between links on actual ugly painng contents and links on the organizaon behind
the site. A good soluon 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
organizaon. 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 idenfy 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:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Helping Your Visitors Find What They Want: Managing Menus
[ 198 ]
3. Enter the Title; this is the name that may be displayed with the menu. Enter a

Descripon 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 boom 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 sll empty.
Time for action – step 2: Move hyperlinks to the new menu
One way to ll a new menu is by creang brand new links (Menus | About SRUP | New). In
this case, however, we'll move three exisng 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.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 8
[ 199 ]
3. Click on the Move buon in the toolbar.
4. In the next screen, select the desnaon menu. In the Move to Menu: list, select
aboutsrup and click on the Move buon to conrm.
5. The Menu Item Manager screen now displays three new items in the About
SRUP menu:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Helping Your Visitors Find What They Want: Managing Menus
[ 200 ]
6. Let's put crical content links in the highest posion. 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 ne now; the new About SRUP menu contains the desired hyperlinks in
the desired order. There's just one thing le 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 sengs of the appropriate menu
module. The module is the "funconality 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:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 8
[ 201 ]
2. In the Module: [Edit] screen, select Enabled: Yes. This sets the menu to show.
Leave Posion: set to le for now. This will make the new menu appear in the
same column as the Main Menu.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Helping Your Visitors Find What They Want: Managing Menus
[ 202 ]
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 posion in the le-hand side column:
You're almost there! We've got our new menu showing up in the le column, but we ob-
viously want it to appear below the Main Menu to establish a beer visual hierarchy. This
takes just one extra step. If you've clicked out of the module eding screen, navigate back to
Extensions | Module Manager and select the About SRUP module to edit the menu again.
4. In the Details secon, there are two sengs that control where the menu will turn
up on the frontend. Again, we'll leave Posion set to le (to keep the menu in the

le-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 le posion.
To change this value, select 2: Main Menu. This will posion the new menu
below the Main Menu.
5. Click on Apply and then on Preview to check that the secondary menu is now
published in the right place:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 8
[ 203 ]
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 ve main links. All links that point to content about the SRUP organizaon
have been moved to a separate menu.
More on menu module sengs
Up to now, you've use the menu module sengs screen (the Module : [Edit]
screen) only to adjust the posion of the menu on the web page. However,
there are dozens of other menu module sengs that you can tweak to your
liking. See the Exploring menu module sengs secon later in this chapter for
a full overview.
Tweaking the menu styling
You'll have noced the second menu (the About SRUP menu) has a dierent 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 Sux box. By default, it's empty. Enter _menu as Module Class Sux. Click
on Apply and then on Preview. The two menus now share the same styling. In the default
Joomla! template, modules with the sux _menu will display the specic formang that's
reserved for menus:
The rhuk_milkyway template is set up this way. Its stylesheet contains specic menu styles,

ending in the sux _menu (such as module_menu instead of just module). By adding the
_menu Module Class Sux to this module we make use of these specic styles—and our
menu will be formaed accordingly.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Helping Your Visitors Find What They Want: Managing Menus
[ 204 ]
Don't worry if you don't like the default formang of the Joomla! Main Menu
and submenu. Many templates allow for aracvely styled menus. If you have
some CSS coding skills you can edit the menu styles yourself. You'll see examples
of styling with CSS in Chapter 11 using templates.
Time for action – tweak the menu position and orientation
Placing a second menu in the le-hand side column makes it very prominent. You might
noce that site visitors nd this second menu distracng. And aer all, the stac links to
informaon 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 boom.
By default, at the boom of the screen there's a copyright noce. We'll start by removing
this to make room for the new menu.
Removing the copyright noce involves deleng a few lines of code from the template HTML.
If you want to move the menu to any other screen posion you can skip the rst three steps:
1. Navigate to Extensions | Template Manager. Select the rhuk_milkyway template
and click on Edit HTML.
2. In the HTML editor screen, nd and select the following code:
<p id="power_by"> <?php echo JText::_('Powered by') ?>
<a href="">Joomla!</a>.<?php echo
JText::_('Valid') ?> <a href=" />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 pre-
view the frontend to check if the copyright noce has eecvely disappeared.
To have the About SRUP menu occupy t h e f ree posion, we'll edit the menu

module properes:
4. Navigate to Extensions | Module Manager and click on the About SRUP
menu module.
5. In the Posion drop-down box, select syndicate. This is the boom most posion
in this template.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 8
[ 205 ]
6. In the Parameters secon, 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.
7. 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 eect is
that the menu links will be displayed as follows:
Who are SRUP? Mission Statement Contact
8. Click on Apply and click on Preview. The menu has been moved to the boom of
the page:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Helping Your Visitors Find What They Want: Managing Menus
[ 206 ]
What just happened?
We've just removed the copyright noce that by default appears at the boom of the
template. This creates room for a separate "About SRUP" menu. To get this menu to display
at the boom posion we've changed its module posion and the menu style (the links
orientaon) from the default values. The result is that the menu is now displayed as row of
links at the boom of the page. This makes them much less prominent. Only visitors looking
for these links will really noce them.
This kind of presentaon is a good choice for links that don't t the main navigaon menus.

In this example, we've moved links on the organizaon behind the site to the boom menu.
In real life, it's common to publish stac links there (such as About This Site, Disclaimer,
and Sitemap).
Menu Manager or Module Manager?
To customi ze a m en u, you'll s omemes use the Menu Ma na ger, and
somemes use the Module Manager. What's the dierence? 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 sengs.
Option 3: Creating submenu items
There's sll room for improvement in our Main Menu. Although there are now only ve links
le, the way they're organized might sll 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 aer the News link has been clicked.
Download at Wow! eBook
WWW.WOWEBOOK.COM