Complete Drupal 6 Menu Theming

Drupal 6 Theming of Menus

This tutorial expands on the snippet at: Theming Drupal Menu and how to make it work for Drupal 6.

Theming Drupal menus are easy once you understand the key drupal menu theming API functions. I will go one by one depending on the level of css selector (id/class) you want to put on drupal menu system.

Theming by adding css id/class to a Drupal Menu ul

The API function theme_menu_tree($pid) works for Drupal 5. Drupal 6 equivalent for the same is theme_menu_tree($tree). We override Drupal 5 functions by using phptemplate_menu_tree($pid) as shown in drupal menu theming example in template.php. In Drupal 6, we do that by using phptemplate_menu_tree($tree) in your template.php as in the section follow: The API function theme_menu_tree($pid) works for Drupal 5. Drupal 6 equivalent for the same is theme_menu_tree($tree)

function theme_menu_tree($tree) {
return ‘

‘;
}
?>

Now, if you want to put id foo and class bar to the menu whose name is primary-links in the ul part, you can do something like this in your template.php:

function phptemplate_menu_tree($tree) {
if ($tree = menu_tree(‘primary-links’)) {
$output .= ”

    “;

 

    $output .= $tree;

 

    $output .= “

\n”;
return $output;
} else {
return ‘

‘;

}
}
?>

Drupal menu_tree() is API function that takes name of the menu as the input and returns the tree. Sounds good?

Theming menu item li in Drupal Menu

Here you use the API function, theme_menu_item().
Here, I would add a unique id to the drupal menu theme item and then theme the menu item.
/**
* Theme override for theme_menu_item()
*/
function phptemplate_menu_item($link, $has_children, $menu = ”, $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? ‘expanded’ : ($has_children ? ‘collapsed’ : ‘leaf’));
if (!empty($extra_class)) {
$class .= ‘ ‘. $extra_class;
}
if ($in_active_trail) {
$class .= ‘ active-trail’;
}

// Add unique identifier
static $item_id = 0;
$item_id += 1;
$id .= ‘ ‘ . ‘menu-item-custom-id-‘ . $item_id;
// Add semi-unique class
$class .= ‘ ‘ . preg_replace(“/[^a-zA-Z0-9]/”, “”, strip_tags($link));

return ‘

  • ‘. $link . $menu .”

 

\n”;
}
?>

function phptemplate_menu_item($link, $has_children, $menu = ”, $in_active_trail = FALSE, $extra_class = NULL) {

if ($menu == ”){
This is simple, since, this API function allows you to pass extra class in its function.
} else {
$class = ($menu ? ‘expanded’ : ($has_children ? ‘collapsed’ : ‘leaf’));
if (!empty($extra_class)) {
$class .= ‘ ‘. $extra_class;
}
if ($in_active_trail) {
$class .= ‘ active-trail’;
}

return ‘

  • ‘. $link . $menu .”

 

\n”;
}
}

You can add a zebra class like this to the menu item:
function phptemplate_menu_item($link, $has_children, $menu = ”, $in_active_trail = FALSE, $extra_class = NULL) {
static $zebra = FALSE;
$zebra = !$zebra;
$class = ($menu ? ‘expanded’ : ($has_children ? ‘collapsed’ : ‘leaf’));
if (!empty($extra_class)) {
$class .= ‘ ‘. $extra_class;
}
if ($in_active_trail) {
$class .= ‘ active-trail’;
}
if ($zebra) {
$class .= ‘ even’;
}
else {
$class .= ‘ odd’;
}
return ‘

  • ‘. $link . $menu .”

 

\n”;
}
?>

?>

Theming Menu link in Drupal menu

Here, you use the drupal API function theme_menu_item_link. In Drupal 6, this has become: theme_menu_item_link($link):

 

The way it would be used as following. In the code below, I am adding loginclass to the Login link:

return l($link[‘title’], $link[‘href’], $link[‘localized_options’]);

} else {

if (empty($link[‘localized_options’])) {
$link[‘localized_options’] = array();
}

return l($link[‘title’], $link[‘href’], $link[‘localized_options’]);

}
}
?>

Now you can call the menu in your page.tpl.php as:

$menu_name = ‘navigation’; // it is menu name. it can be primary-links etc
print menu_tree($menu_name ) ;

Author: Sudeep Goyal, Drupal product development and theming

Comments on this entry are closed.

css.php