Generate markup for drop-down menus

Drop-down menus are an accepted and intuitive way of presenting links for large numbers of nested pages on a web page, but Drupal currently lacks a built-in mechanism for easily implementing them. For drop-down menus to work, our generated HTML should include all the items of a given menu, not just those at the top level and in the active trail; plus a flag indicating the current page, if any. While modules like Nice Menus already exist for providing nested menus in a block, this method makes it possible for drop-downs to appear anywhere lists of menu links currently appear in your theme.

The main challenge with getting this to work is generating the underlying data structure representing the menu hierarchy. While Drupal doesn’t (yet) include a function that does what we need, it does have two functions whose output can be combined. They are:

• menu_tree_page_data(), which when given the name of a menu, returns a tree (a nested array of menu items and metadata) leading to the current page. You can see this function at work generating the main navigation menu. Its output depends on the page that called it.
• menu_tree_all_data(), which returns a tree containing every item in a given menu.

What we want is a tree which contains every menu item, plus data indicating which item in the menu is the current page. To do that, we’re going to modify the built-in menu_navigation_links() function. In its default form, it generates a 1-dimensional array representing the top-level links of a given menu. We’re going to split it into two functions and have them recursively generate a multidimensional array of all the links in a menu. All the following code would be located inside your theme’s folder in the template.php file.

As you can see, the second function incorporates active trail information into the final array by simultaneously checking items in $tree_page and $tree_all. Since both trees represent the same data, the keys from one tree can be used to look up information in the other. And if a menu item contains nested items, as indicated in the tree with a key labelled “below”, themename_navigation_links_level() calls itself, passing in the nested items of each tree and returning an array of the nested items which are given the key “children” in the final array.

So we’re halfway there. We have an array (in the same format used by menu_primary_links() and menu_secondary_links()) which we can use for generating the menu’s HTML, but the built-in theme_links() function is not prepared to handle multidimensional arrays of links. Fortunately, since it’s a themeable function, we can override it by including it in template.php and naming it themename_links() without any additional changes to our theme. (Of course, you should always replace instances of “themename” with your own theme's machine name.)

The only changes we’ve made are adding a statement to tack on a "haschildren" class to parent menu items, and another statement just before the $i++; causing the function to recursively call itself to generate the HTML for any nested items it detects.

We’ll add one last function to make calling these functions a little more concise. The code below, when called, generates markup for the primary links. This is completely optional, though.

With the back end finished, changes to our theme’s template is relatively simple. The following code from page.tpl.php, or something similar to it:

can be replaced with:

in order to generate nested menus for the primary links. Here's some sample output of a primary links menu with a single parent link when viewed from the “North America” page:

Of course, all this is useless without proper CSS styling. As this topic has been covered before, I'd suggest you look at how I did it in my theme, NoProb. The main idea is that all ul.sublinks elements have “display: none;” applied to them by default, and are shown only when their parent li.haschildren element is hovered over. Since IE6 doesn't apply the :hover pseudo-class to anything other than links, some JavaScript is required, which I originally got from http://www.alistapart.com/articles/horizdropdowns and modified to support more than one level of nesting.

A template.php file containing the above code is attached to this page. Questions, comments, improvements, and pointing out of glaring oversights are welcome.

Attachment	Size
template.php_.txt	4.41 KB