6

I am using the Menu Block Module to generate my main and sub navs. I want to add a class to the ul for just the top level of the main nav.

As I understand it, I can do something like this:

function theme_menu_tree__menu_block($variables) {
  return '<ul class="my classes">' . $variables['tree'] . '</ul>';
}

or this:

function theme_menu_tree__menu_block__main_menu($variables) {
  return '<ul class="my classes">' . $variables['tree'] . '</ul>';
}

However, that seems to wrap every level of the navigation with the above html. How can I restrict the modification to the first level?

It doesn't look like I am given much data in $variables. Am I missing something?

8

Here's the trick: theme_menu_tree__MENU_NAME() and theme_menu_link().

<?php
/**
 * Implements theme_menu_tree().
 */
function THEMENAME_menu_tree__MENU_NAME(&$variables) {
  return '<ul class="FIRST-LEVEL-CLASS">' . $variables['tree'] . '</ul>';
}

/**
 * Implements theme_menu_link().
 */
function THEMENAME_menu_link__MENU_NAME(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    // Wrap in dropdown-menu.
    unset($element['#below']['#theme_wrappers']);
    $sub_menu = '<ul class="OTHER-LEVEL-CLASS">' . drupal_render($element['#below']) . '</ul>';
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
?>
1
  • If I understand right, this should be implemented in template.php? Have been trying to get this working with no success yet.. Jan 6 '15 at 21:26
1

$variables gives me:

array(3) {
  ["tree"]=> string(n) "HTML for the sub-tree"
  ["theme_hook_suggestion"]=> string(n) "menu_tree__menu_block__main_menu"
  ["theme_hook_suggestions"]=> array(0) { }
}

It seems pretty bad, but I could do a string search to see if the menu contains the text for one of my top level elements:

<?php

function theme_menu_tree__menu_block__main_menu($variables) {
  if (!stripos($variables['tree'], 'home')) {
    return '<ul>' . $variables['tree'] . '</ul>';
  } else {
    return '<ul class="my classes">' . $variables['tree'] . '</ul>';
  }
}

?>
0

You might be interested in this recent blog post regarding themeing native menus in drupal by Webbykat (as opposed to menu_blocks). He is adding classes to theme_links, which your not trying to call. He's modifying the tpl file, but you could do this in YOURTHEME_links__system_main_menu() I believe. I've used this function as well, but offhand not to achieve this.

<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix', 'main-menu')), 'heading' => array('text' => t('Main menu'),'level' => 'h2','class' => array('element-invisible')))); ?>

Fact 4: You can control the classes applied to each menu ul in the menu region tpl (depending on your theme, presumably).

To add a class to the ul of the main menu, you would modify array('links', 'inline', 'clearfix', 'main-menu')) to array('links', 'inline', 'clearfix', 'main-menu', 'new class')).

It actually looks like your referencing code sample from like this blog post from Koumbit:

I added the following code to the template.php of my theme, to make both the standard user menu and our custom menu for anonymous users use Drupal's built in theming for inline links:

/**
 * Make the user menu inline
 */
function customtheme_menu_tree__user_menu($variables) {
  return '<ul class="links inline clearfix">' . $variables['tree'] . '</ul>';
}

But, I think what you really have to do is examine the theme's region-menu.tpl.php and see how it or like page.tpl.php is rendering the main menus, every theme is different.

Both theme_links and theme_menu_tree render Sets (collections) of links. Different themers use different functions to the same end.

Another module that can help you figure this out is Devel and Devel_Themer. Toggle devel_themer on and select your main menu and it will tell you the theme_function being used and the .tpl file (and overrides possible) in use.

2
  • I'm using the Menu Block Module. Will those changes work with the blocks from that module?
    – John B
    Jan 11 '13 at 16:40
  • it should, install devel_themer and see what theme function you need to call.
    – tenken
    Jan 11 '13 at 23:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.