Time for action—tweak the menu position and orientation

Placing a second menu in the left-hand side column makes it very prominent. You might notice that site visitors find this second menu distracting. And after all, the static links to information 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 bottom.

By default, at the bottom of the screen there’s a copyright notice. We’ll start by removing this to make room for the new menu.

Removing the copyright notice involves deleting a few lines of code from the template HTML. If you want to move the menu to any other screen position you can skip the first three steps:

1. Navigate to Extensions | Template Manager. Select the rhuk_milkyway template and click on Edit HTML.
2. In the HTML editor screen, find 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 preview the frontend to check if the copyright notice has effectively disappeared.

To have the About SRUP menu occupy the free position, we’ll edit the menu module properties:

4. Navigate to Extensions | Module Manager and click on the About SRUP menu module.
5. In the Position drop-down box, select syndicate. This is the bottom most position in this template.

   
6. In the Parameters section, 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 effect 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 bottom of the page:

   

What just happened?

We’ve just removed the copyright notice that by default appears at the bottom of the template. This creates room for a separate “About SRUP” menu. To get this menu to display at the bottom position we’ve changed its module position and the menu style (the links orientation) from the default values. The result is that the menu is now displayed as row of links at the bottom of the page. This makes them much less prominent. Only visitors looking for these links will really notice them.

This kind of presentation is a good choice for links that don’t fit the main navigation menus. In this example, we’ve moved links on the organization behind the site to the bottom menu. In real life, it’s common to publish static links there (such as About This Site, Disclaimer, and Sitemap).

Menu Manager or Module Manager?
To customize a menu, you’ll sometimes use the Menu Manager, and sometimes use the Module Manager. What’s the difference? 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 settings.

Option 3: Creating submenu items

There’s still room for improvement in our Main Menu. Although there are now only five links left, the way they’re organized might still 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 after the News link has been clicked.

Time for action—create a secondary menu item

Let’s remove the News Archive link from the primary level in the Main Menu and show it as a sublevel link:

1. To edit the Main Menu contents, navigate to Menus | Main Menu.
2. Click on the title of the item you want to edit, News Archive.
3. In the Menu Item Details section, the parent item is set to top. Change the parent item to News:

   

   

4. Click on Save. In the list of menu items in the Menu Item Manager, the new sublevel menu item is shown indented:

   

5. Click on Preview to see the output on the frontend. The Main Menu now shows four primary links. When the visitor clicks on News, a secondary link News Archive is displayed:

   

   

What just happened?

By assigning a parent item to a menu link you can create a submenu item. Of course, submenus aren’t the only way to make secondary content visible. The main links, can point to overview pages with links to content from sections or categories. Those “secondary home pages” can make secondary menu links superfluous.

However, sometimes it’s better to add sublevels in the menu itself. If you have items outside of the section or category structure (such as uncategorized pages), submenus can clarify the coherence of the site. You can have main (“parent”) links and secondary (“child”) links.

Creating split submenus

When you want to use submenus on your site, you can also choose an altogether different presentation from what you’ve just seen. You’re not limited to having submenu items shown within the main menu, as it’s also possible to place main navigation links horizontally along the top of the page and display second level links in a separate menu (for example, in a vertical menu in the left-hand side column). This creates a clear visual distinction between the main menu items and their submenu items. At the same time the visitor can see that those two menus are related. The parent item can be displayed as “active” (using a different style or color) when the related submenu is displayed.

An example is shown in the following screenshot. The primary link, Activities, is shown in a (horizontal) main menu bar. When this link is clicked a separate submenu shows secondary links (submenu links) to two category overview pages (Meetings and Lectures):

How do you build this kind of menu system in Joomla!? In short, you create a copy of the main menu, set the original main menu to show only the top-level links, and set the copy to show only the second-level links. Joomla! will automatically display the appropriate submenu when the parent item is chosen in the top menu.

We won’t add a split menu system to our example site as it doesn’t have the amount of content that would justify an elaborate multi-level navigation. However, feel free to experiment on your own website, as this is a very powerful technique. The following are the required steps in more detail:

1. Suppose you have created a Main Menu with two or more links to sublevel items. Navigate to Extensions | Module Manager. Select the Main Menu module and click on Copy.
2. The same list now contains an item called Copy of Main Menu. Open that copy and enter another title (for example, Submenu). Select Position: left.
3. In the Module Parameters, set the Start Level to 1 and the End Level to 1. This will make the menu display only second-level menu items.
4. Now edit the Main Menu module to show only the top-level items. Set Start Level to 0 and End Level to 0.

The menu is done! The submenus now only display when the corresponding main-level link is clicked.

Have a go hero—arrange menus any way you like

Joomla!’s split menu capabilities allow you to design exactly the type of navigation that’s appropriate for your site. You can place a row of main menu links at the top of the page and position secondary (submenu) links in the left-hand side or right-hand side column. Try to figure out what arrangement of main and secondary links fits your site best and how you can realize this in Joomla!. Here are a few suggestions (some common arrangements of site navigation) to get you going:

By default, Joomla’s main menu links are displayed as a vertical row in the left-hand side column. How can you achieve a horizontal row of main menu links, as shown in the first three images above? Have a look again at the Time for action – Tweak the menu position and orientation earlier in this article. It shows the easiest way to change the menu orientation in Joomla!, selecting the appropriate Menu Style in the menu module editing screen. However, there are templates that are specifically designed to support horizontal menus. These contain the appropriate module positions and module styling for a main horizontal menu (and do a much better job at this than the default Joomla template).

Exploring menu module settings

When creating or editing a menu module, the module details and parameters allow you to control exactly where the menu is shown and how it displays. In many cases, the default settings will do—but if you really want control over your menus, it’s a good idea to explore the wide range of additional possibilities these settings provide. In the Module Manager, click on the menu name (such as Main Menu or About SRUP). The Module: [Edit] screen appears.

The three main sections of the Module: [Edit] screen are Details, Menu Assignment, and Parameters.