This chapter is from the book
This chapter is from the book
This chapter is from the book
Navigation and Menus
Your page template includes two variables containing navigation menus that you can place anywhere you like in your Web page: $primary_links and $secondary_links. These variables contain items from the two Drupal menus of the same name—primary and secondary links. Drupal menus are collections of links to both on-site and off-site URLs.
To add new items to the menus, you can use one of two methods:
To add a link to an existing node, navigate to the editing screen for the node and adjust its menu settings as in Figure 4.3.
Figure 4.3 Adding a node to a menu from the node editing screen.
You may also use the menu administration system to add a page to the menu as shown in Figure 4.4 by navigating to Administer, Site building, Menus, Add item. This method allows you to add links to off-site URLs.
Figure 4.4 Adding a path to Primary links from the menu administration area.
)
)
To add subsection menu items, you use the same technique described above, but change the “Parent item” to the menu item in which your new subsection ought to be included. For example, suppose you have a set of primary links containing “Mammal,” “Amphibian,” and “Reptile.” To place “Kitten” as a subsection of “Mammal,” you would set the “Parent item” to be “Mammal” when adding the menu information for the “Kitten” node.
More menus into your page template
The menu module provides a block for every menu, and blocks can be placed into any region on the site. To display a menu in a block, navigate to Administer, Site building, Blocks. Complete the on-screen instructions to add the menu to a Web site region. More information about creating custom, task-based menus appears in Chapter 8.
Within the menu administration area, you can specify which menu is used for $primary_links and which menu is used for $secondary_links. By default, the variable $primary_links contains menu items from the menu “Primary links” and the variable $secondary_links contains items from the menu “Secondary links.” To alter the menus that are used for these two navigation variables, navigate to Administer, Site building, Menus, Settings and adjust the settings as appropriate.
The variable $secondary_links can be configured in one of two ways: Either this menu can contain a second set of sitewide links for your site with “secondary” content (for example, legal notice, contact information), or you can configure $secondary_links to contain the relevant subsection navigation for your primary links. Use the following steps to change the default behavior:
- Navigate to Administer, Site building, Menus.
- Choose the Settings tab.
- Change the “Source for the secondary links” so that it matches the menu that is set in the “Source for the primary links.”
- Scroll to the bottom of the Web page and click “Save configuration.”
The page template variable $secondary_links now contains the subsection links that have been defined for each of the items in $primary_links. Referring to the previous example, “Kitten” will now be displayed in the output of $secondary_links when you select “Mammal” from the list of menu options provided by the variable $primary_links.
Theming Menus
A menu is built from three nested parts: the menu tree, the menu items (the “leaves” on the menu tree), and the menu item links. It is possible to alter the HTML for each of these components, although in most cases customizing the CSS for the default XHTML markup will be enough to make your menus look great. In addition to their basic structure, menus contain information about the menu leaves. For example, Figure 4.5 shows the active trail of the current page, Modules, and includes a menu of items that are collapsed, and expanded.
)
Figure 4.5 Menus are built of a menu tree, the menu items, and menu item links.
Depending on the type of menu items you want to alter, there are two relevant strategies:
- To alter the contents of the variables $primary_links and $secondary_links, use the page’s preprocess function.
- To alter the markup for all menus, use theme functions.
Drop-down menus
The variables $primary_links and $secondary_links contain only the top-level menu items for their respective menus. If you would like to use a tree-like structure (useful for drop-down or fly-out menus) for your primary or secondary links, you must use the block version of your menu instead of the theme variables. The modules MenuTree and Nice Menus both create drop-down menus from your navigation variables. The project pages for these two modules can be found at http://drupal.org/project/menutree and http://drupal.org/project/nice_menus, respectively. Compare their features and choose the most appropriate module for your needs.
The primary and secondary links are registered theme variables. You may alter their contents by using the page’s preprocess function. The variables themselves consist of an array of links and attributes. To make changes, you must loop through the list of links and alter each one individually. For example, if you decide to add a new class to each menu item that is related to its position in the menu, you could use the code snippet below. This technique would be useful if you wanted to add an icon to each menu item, because it relies on the exact order of the menu items. Once this order is set, you may not alter the order of the menu items without also updating the corresponding CSS styles.
function bolg_preprocess_page(&$variables) {
// Make a shortcut for the primary links variables
$primary_links = $variables['primary_links'];
// Loop through the menu, adding a new class for CSS selections
$i = 1;
foreach ($primary_links as $link => $attributes) {
// Append the new class to existing classes for each menu item
$class = $attributes['attributes']['class'] . " item-$i";
// Add revised classes back to the primary links temp variable
$primary_links[$link]['attributes']['class'] = $class;
$i++;
}
// End of the foreach loop
// reset the variable to contain the new markup
$variables['primary_links'] = $primary_links;
} // End of the preprocess function
Using the appropriate unique identifier for the primary links, add the new classes to your style sheet:
#primary_links .item-1 { /* styles for the first menu item */ }
This technique works well if you want to add styles based on the order of options in a menu. Menus are stored in an associative array and have a unique key assigned to each item. To create a unique menu item identifier, replace the variable $i with the variable $link in the snippet given earlier. Your menu items will now be assigned a unique identifier that does not change even when the order of the menu items is altered.
For more information about how menus are constructed and themed, read the API documentation at http://api.drupal.org/api/function/theme_links/6 and http://api.drupal.org/api/group/menu/6 (scroll to the list of theme functions).