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="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 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 . 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 formang of the Joomla! Main Menu and submenu. Many templates allow for aracvely. 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