Hour 21. Working with Menus

What You’ll Learn in This Hour:

• Creating Menus and Adding Content to Them

• Creating Content and Adding It to Menus

• Creating Custom Menus and Using Them in Blocks

Introduction

When people start to think about the structure of a website, one of the first things they often think about is the menu structure. They worry over that structure to make sure that all the needed information is planned for and laid out in the most useful way.

Remember that in a Content Management System (CMS) such as Drupal, data has no location other than being somewhere in the database. It can be difficult for some people to think about a menu structure in which menu items can appear in multiple places and some of the data appears nowhere. Further muddying the waters is the fact that interface designers for some time now have been having second thoughts about the traditional menus and menu bar. The rise of web-based applications has helped this along. In traditional applications, the menus control the application; in a web-based application, the menus control the browser, and the menus for the web-based application are implemented with HTML (in old-fashioned interfaces) or in a modern tool such as Drupal.

As this hour explores how Drupal handles menus, think about the opportunities that you have. Many modern websites have no internal menus; buttons and other interface elements control navigation. You can do that with Drupal. Other modern websites have hierarchical menus for specific areas of the site and perhaps the entire site. Buttons and other interface elements interact with traditional hierarchical menus so that you can jump in and out.

In this hour, you will see the basics of Drupal’s menu implementation, as well as the specifics of the implementations in Drupal 6 and Drupal 7. One of the major changes in Drupal 7 has to do with the menu structure. Basically, what has happened is that Drupal’s menu structure has grown a bit too large for convenient management. (This is far from uncommon: <insert name of your favorite office productivity tool here> is a classic example.) The solution in Drupal 7 is to break the menu structure apart so that the remaining component parts are, once again, manageable. The general structure of menus, however, has not changed between Drupal 6 and 7.

Looking at Drupal’s Menus

The easiest way to become familiar with Drupal’s menus is to explore some examples. Here is a walk-through of some of the basic concepts. Remember that you can customize just about everything.

Figure 21.1 shows two parts of a menu structure in Drupal. At the left, you can see a primary links menu (you can change the name to anything you want). This is a traditional looking menu with two menu items, each of which has two subitems. As you will see, you can control their order and hierarchy as well as whether the subitems are shown by default.

Figure 21.1. Drupal can build a links menu.

image

At the upper right, the primary links menu is shown again. At the top right of the page, the two main items are shown. As you can see by comparing Figure 21.1 and Figure 21.2, clicking one of the primary links brings up the appropriate sublinks. Compare the hierarchical menu at the left in both figures with the menus at the upper right.

Figure 21.2. The links menu can also be shown in a hierarchical structure.

image

The links in the upper right can also be independent. Note in Figure 21.3 that the top line links at the right represent the main links in the primary links menu, but the lower line (Shop Online and Upcoming Events) are totally separate links. Note, too, that at the top left of the page those other links are shown again; this time, they are arranged hierarchically and are preceded by their title. (You can change Secondary Links to anything else, such as Services or Products.)

Figure 21.3. Links need not be hierarchical.

image

Here is what you have been looking at in Drupal terms:

Primary links theme display— Drupal supports a primary links menu. It is usually an option in a theme so that you can display it or not. Each theme has its own way of displaying primary links. In the Garland theme used here, primary links are shown at the top right of the page with small triangles above them. You turn them on or off in the theme configuration, but you usually cannot change the location.

Primary links block— A primary links block is one of the blocks that you can configure. You can place it in any region of the page (a sidebar, the header, the footer, and so forth); you also can choose not to show it at all.

Secondary links— This is another set of menus and submenus, as shown in Figure 21.3. They can be shown in a secondary links theme display, in a secondary links block, or neither. They can be hierarchical, as shown in Figures 21.1 and 21.2, or unrelated, as shown in Figure 21.3.

In addition to the primary and secondary links, another set of links make up the navigation menu. Although your content and standard Drupal paths can appear in primary or secondary links as well as in the navigation menu, in most cases, your site’s content appears in primary and secondary links while Drupal paths (such as Administer, Create Content, My Account, and Log Out) typically appear in the navigation menu.

The names Primary Links and Secondary Links imply a hierarchical structure to many people. As you work with them, you may want to think of them simply as two different sets of links (Red and Green, for example). Hierarchical menus are another matter.

By the Way: Drupal 7 Menus

In Drupal 7, Primary Links is now Main Menu.

Building a Menu and Using Hierarchies

You have seen the basics of using menus in a theme display and in a block on your site. Before going deeper into those issues, it makes sense to look at exactly how menus are built and where they come from. In Drupal, it is difficult, but not impossible, to create a menu with dead items. It is simple to disable a menu item so that it is grayed out, but having a menu item that points to nothing requires a bit of fiddling—and that is a good thing most of the time.

To help you build menus that function, Drupal gives you two ways of building a menu:

Start from content— Whenever you create a node of any kind, there is a fieldset for menu choices, and you can set them there. Because you start from content, you will always have a working menu item, provided that you enter the menu data. If you do not enter menu data, you will have a node that is not referenced by any menus, and that is perfectly legitimate. Not everything needs to be accessible from a menu.

Start from the menu— You can add a menu item to a new or existing menu. You can also edit an existing menu item and rearrange items and hierarchies. In this way of working, you have the menu item, and you must provide the path to its content.

Most people use both methods at various times.

Starting from Content

Here is how you can use the first method to build a hierarchical menu. The second method is shown later in this hour.

Starting from the Menu

This section helps you manage the default menus in Drupal as well as add new ones of your own. One of the most visible changes between Drupal 6 and Drupal 7 is in the default menus.

Drupal 6

There are three default menus in Drupal 6:

Navigation— This menu contains all the default commands including My Account, Create Content, Administer, and Log Out.

Primary Menu— Initially empty, you can add items to it as described previously.

Secondary Menu— Also initially empty, you can add items to it.

You can add items to the default menus and create your own menus.

In Drupal 6, go to Administer, Site Building, Menus (admin/build/menu), as shown in Figure 21.8. From the list of default menus shown in Figure 21.8, you can add new menus or edit the menus.

Figure 21.8. Configure menus in Drupal 6.

image

Drupal 7

In Drupal 7, menus have been rearranged along with the administrative interface. In fact, the rearrangements are not drastic, but they improve usability. The following is a guide to the default menus in Drupal 7. As is the case in all versions of Drupal, you can rearrange menus and their items:

Administration shortcuts— The Add, Find Content, and Dashboard commands shown at the top of the window when you are administrating Drupal. You can add or remove items from this menu.

Main menu— The menu known as Primary Links in Drupal 6 and previous versions.

Management— The main submenu items (Content, Structure, and so forth) appear across the top of the window.

Navigation— The navigation menu from Drupal 6 and previous versions with management and user items (such as log out) removed.

Secondary menu— The secondary links menu from Drupal 6 and previous versions.

User menu— Contains user account commands as well as Log Out.

Although the list of default menus differs from Drupal 6 to Drupal 7, the way you manage those menus and their items is the same.

Go to Administer, Structure, Menus (admin/structure/menu), as shown in Figure 21.9. You can also use the Structure button and then the Menus link.

Figure 21.9. Administer menus in Drupal 7.

image

Building a Custom Menu for Specific Pages

You can put your new menu-building expertise to good use in building customized menu blocks for specific pages. You can let Drupal maintain secondary links and primary links/main menu links based on the hierarchies you have created in your menus. But how do you handle the frequent need to put a marginal menu structure on specific pages? (This process is the same for Drupal 6 and Drupal 7.)

For a large site, you may have sections of the site devoted to specific areas. For an organization’s management structure, those areas could be the following:

• Human Resources

• Policies

Forms

• Product Information (Internal)

• Product Information (For Public)

This type of site organization lends itself well to a hierarchical approach. For example, the secondary links under Human Resources could be

• Performance Evaluation

• Payroll Policies

• Employee Benefits

One issue may draw your attention: Why is Payroll Policies under Human Resources and not under Policies? The answer is that Drupal content has no location. The same page can be listed as submenu links for both topics.

But, you may want to have a customized set of links in a block in the margin of Payroll Policies that contains links such as

• State Labor Laws (off-site reference)

• Federal Labor Laws (off-site reference)

• Our Personnel Forms

You already know how to do this. Go to the Menus page shown previously in Figures 21.8 and 21.9. Click Add Menu to create a new menu, as shown in Figure 21.16.

Figure 21.16. Add a new menu.

image

The new menu needs a unique internal name (such as hr-resources) and a user-friendly name (such as HR Resources). It will now appear on your list of menus, and you can add items to it the same as you did with the Home menu link. Now that it has been created, you can use it when you create content to specify the Parent Item of new content.

Drupal automatically creates a new block for each new menu that is created. The name of the menu is used for the name of the block; it will appear in the Disabled section of the blocks list, as shown in Figure 21.17. Place it where you want it either by using the pop-up menu or by dragging it. Remember to save the blocks when you are finished.

Figure 21.17. Drupal automatically creates a block for each new menu.

image

With a few nodes created under the HR Resources menu, you could have a block such as the one shown in Figure 21.18.

Figure 21.18. You can assign content to the menu.

image

Here is where the block-specific settings you set in the Configure links on the blocks list can come in handy. The HR Resources block that you have created can appear only on specific pages (or on all except specific pages). Remember that paths can appear in multiple menus. You can create several menu-based blocks for sidebars or any other page regions. The process is exactly what has been described here. You might have half a dozen such blocks, each of which appears (or does not appear) on specific pages. Thus, in addition to your basic navigation to major sections of the site, you can have reference menus such as these. If some pages need a number of these menu-based blocks, you can create new, composite menus for their own blocks.

Figure 21.19 shows a menu-based block (HR Resources).

Figure 21.19. Use menu-based blocks.

image

Summary

After you have mastered the basics of menus, you can repeat the process over and over. The use of menu-based blocks, particularly when tied to specific pages, can be an effective way of providing navigation for your end users (and, after you have set it up, it is very easy to implement and reimplement).

Q&A

Q. We are going to be converting from Drupal 6 to Drupal 7. What is the best way to avoid confusing our end users with the changed menu structure?

A. This is an issue only if you expose the Navigation menu to your users. If you use your own menus, users will not know that things have changed (although administrators will know). Depending on your time frame, you might want to think about implementing and exposing a site-specific navigation design that is independent of the underlying structure. If you have enough time, consider beginning to implement any part of the navigation that will be visible to users in advance. For example, you can build a Users menu in Drupal 6 so that people are used to it.

Q. Are there limits to the sizes of menus?

A. Many people would say that the answer is, “Unfortunately, no.” There is research to indicate that long lists of menus (particularly pop-up menu items) are unmanageable. If you have ever navigated through a pop-up menu containing more than 100 countries, you know that unless you live in an early alphabetical place, such as Austria, it can be tedious and frustrating. Particularly with the advent of new web technologies that allow for partial page loads, you can frequently refine the interface choices as people move along.

Workshop

Quiz

1. Where do I set the text to appear when hovering over a menu link?

2. How do you create a menu-based block?

3. How do you create hierarchical menus?

Quiz Answers

1. This is the menu link description field.

2. Drupal does it for you automatically when you create a new menu. (The blocks are for the menu, so if you add or remove individual menu links, blocks are updated accordingly.)

3. There are two meanings to this question:

a. When you create a menu link, set its parent link to the menu link you want to be its parent.

b. For default primary/secondary link behavior, set the secondary links to be primary links so that the hierarchical submenus of primary links will properly appear in the secondary links tabs.

Activities

Laying out your site’s menu design is something that benefits from more rather than fewer people. Try out your navigation architecture on paper or in a mock-up to see where people have problems.

If your site is button-centric, experiment with a menu-centric interface and vice versa. Do anything you can think of to force yourself and your colleagues to think of your site’s structure from a different perspective.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.186.248