4

I have a menu that should look like this:

<ul class="subpagemenu">
<li><a href="xx">xx</a>
  <ul>
  <li><a href="xx">xx</a></li>
  </ul>
</li>
<li><a href="xx">xx</a></li>
</ul>

You can see, that the first ul has a class and the submenu ul doesn't have.

I am using this code to add class to the ul.

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

But it adds that class to the all submenus.

<ul class="subpagemenu">
<li><a href="xx">xx</a>
  <ul class="subpagemenu">
  <li><a href="xx">xx</a></li>
  </ul>
</li>
<li><a href="xx">xx</a></li>
</ul>

Is there any way to theme the sub menu? Thank you.

9
  • Menus are built recursively; it's theoretically possible to override that, but why exactly do you need to? The only thing I can think of is that you need to target the submenu with CSS, but of course you could just do that with ul ul
    – Clive
    Dec 7 '13 at 13:59
  • Yes, I know, but it's a task and the code output has to be in exactly this way.. Dec 7 '13 at 14:04
  • You mean like a school assignment? That's a very strange rule to set, there's no value in teaching you not to use CSS. If this is a real world project, I'd advise telling whoever's insisting on that markup that it's a futile exercise. But hey, I guess if they want to pay for the time, you could make this a pretty good earner! Solving with CSS will take you about 10 seconds; working out how to override all the necessary theme functions, and rewriting the menu functions to not render recursively, would probably take an hour or two on my estimation
    – Clive
    Dec 7 '13 at 14:07
  • It's a real world project... I know, I don't like it either, but it's really complicated and it should be done this way. Dec 7 '13 at 14:10
  • 1
    You could trivially add the required class and depths at a specified level with jQuery. See line 42 in my theme, Gratis' scripts file. However, this can also be done with a preprocess function. See line 428 in template.php: Just a few examples to show what's possible. Dec 11 '13 at 14:29
1
function mytheme_menu_tree__menu_mymenu($variables) {
  return '<ul class="subpagemenu">' . $variables['tree'] . '</ul>';
}

function mytheme_menu_tree__menu_mymenu_second($variables) {
  return '<ul>' . $variables['tree'] . '</ul>';
}

function mytheme_menu_link__menu_mymenu($variables) {
  $element = $variables['element'];

  $submenu = '';
  if ($element['#below']) {
    // You can set a theme wrapper here or put an empty array() only
    // and theme the second level directly by adding <ul></ul> one line below.
    $element['#below']['#theme_wrappers'] = array('menu_tree__menu_mymenu_second');
    $submenu = drupal_render($element['#below']);
  }

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $submenu . "</li>\n";
}

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.