Chapter 8 [ 197 ] A quick way to change the posion of mulple 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 denively 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 navigaon to enable visitors to quickly nd the informaon on ugly painngs that this site is about. As the current Main Menu is rather long, it's dicult for the visitor to disnguish between links on actual ugly painng contents and links on the organizaon behind the site. A good soluon 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 organizaon. 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 idenfy 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 Descripon 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 boom 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 sll empty. Time for action – step 2: Move hyperlinks to the new menu One way to ll a new menu is by creang brand new links (Menus | About SRUP | New). In this case, however, we'll move three exisng 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 buon in the toolbar. 4. In the next screen, select the desnaon menu. In the Move to Menu: list, select aboutsrup and click on the Move buon to conrm. 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 crical content links in the highest posion. 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 sengs of the appropriate menu module. The module is the "funconality 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 Posion: 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 posion 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 beer visual hierarchy. This takes just one extra step. If you've clicked out of the module eding screen, navigate back to Extensions | Module Manager and select the About SRUP module to edit the menu again. 4. In the Details secon, there are two sengs that control where the menu will turn up on the frontend. Again, we'll leave Posion 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 posion. To change this value, select 2: Main Menu. This will posion 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 organizaon have been moved to a separate menu. More on menu module sengs Up to now, you've use the menu module sengs screen (the Module : [Edit] screen) only to adjust the posion of the menu on the web page. However, there are dozens of other menu module sengs that you can tweak to your liking. See the Exploring menu module sengs secon later in this chapter for a full overview. Tweaking the menu styling You'll have noced the second menu (the About SRUP menu) has a dierent 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 Sux box. By default, it's empty. Enter _menu as Module Class Sux. Click on Apply and then on Preview. The two menus now share the same styling. In the default Joomla! template, modules with the sux _menu will display the specic formang that's reserved for menus: The rhuk_milkyway template is set up this way. Its stylesheet contains specic menu styles, ending in the sux _menu (such as module_menu instead of just module). By adding the _menu Module Class Sux to this module we make use of these specic styles—and our menu will be formaed 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 formang of the Joomla! Main Menu and submenu. Many templates allow for aracvely 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 noce that site visitors nd this second menu distracng. And aer all, the stac links to informaon 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 boom. By default, at the boom of the screen there's a copyright noce. We'll start by removing this to make room for the new menu. Removing the copyright noce involves deleng a few lines of code from the template HTML. If you want to move the menu to any other screen posion 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="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 pre- view the frontend to check if the copyright noce has eecvely disappeared. To have the About SRUP menu occupy t h e f ree posion, we'll edit the menu module properes: 4. Navigate to Extensions | Module Manager and click on the About SRUP menu module. 5. In the Posion drop-down box, select syndicate. This is the boom most posion in this template. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 8 [ 205 ] 6. In the Parameters secon, 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 eect 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 boom 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 noce that by default appears at the boom of the template. This creates room for a separate "About SRUP" menu. To get this menu to display at the boom posion we've changed its module posion and the menu style (the links orientaon) from the default values. The result is that the menu is now displayed as row of links at the boom of the page. This makes them much less prominent. Only visitors looking for these links will really noce them. This kind of presentaon is a good choice for links that don't t the main navigaon menus. In this example, we've moved links on the organizaon behind the site to the boom menu. In real life, it's common to publish stac 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 omemes use the Menu Ma na ger, and somemes use the Module Manager. What's the dierence? 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 sengs. Option 3: Creating submenu items There's sll room for improvement in our Main Menu. Although there are now only ve links le, the way they're organized might sll 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 aer the News link has been clicked. Download at Wow! eBook WWW.WOWEBOOK.COM . id="power_by"> <?php echo JText::_('Powered by') ?> <a href="http://www .joomla. org"> ;Joomla! </a>.<?php echo JText::_('Valid') ?>. eBook WWW.WOWEBOOK.COM Helping Your Visitors Find What They Want: Managing Menus [ 204 ] Don't worry if you don't like the default formang of the Joomla! Main Menu and submenu. Many templates allow for aracvely. 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