Drupal Override Custom Menu Template

Question

Hi Guys,

I created a custom menu called "sub-top-nav" and now I'd like to override the html output. In particular I would like to add an unique class to each item like.

This is how it looks atm:

<div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav">
    <div class="content">
    <ul class="menu">
      <li class="leaf first"><a title="Test 1" href="/test1">Test 1</a></li>
      <li class="leaf"><a title="Test 2" href="/test2">Test 2</a></li>
      <li class="leaf active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li>
      <li class="leaf last"><a title="Test 4" href="/test4">Test 4</a></li>
    </ul>
  </div>
</div>

And I'd like to change it into:

<div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav">
  <div class="content">
    <ul class="menu">
      <li class="leaf test1 first"><a title="Test 1" href="/test1">Test 1</a></li>
      <li class="leaf test2"><a title="Test 2" href="/test2">Test 2</a></li>
      <li class="leaf test3 active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li>
      <li class="leaf test4 last"><a title="Test 4" href="/test4">Test 4</a></li>
    </ul>
  </div>
</div>

This would give me more styling power. Any idea how that works?

Thanks in advance!

Answer 1

You can use the theme_menu_item function in your theme's template.php to do pretty much whatever you want to those menu items, including adding classes, ID's, etc.

Answer 2

I got it to work now. This piece of code might help someone else as well! It goes into yourtheme/template.php

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';

  $class .= ' ' . preg_replace('/[^a-zA-Z0-9]/', '', strtolower(strip_tags($link)));

  return '<li class="'. $class .'">'. $link . $menu ."</li>\n";
}

Answer 3

I got your function to work but I am trying to add a class to the first level of list-items only -- not all of which have sub-menus. Does anyone have a tip for how to target the first set of <li>s, not including any nested menus?

Below is my desired code, adding a .parent class to the first level of <li>s only.

<ul class="menu">
    <li class="parent expanded first active-trail"><a href="/drupal/art/2010" class="active">ART</a>
      <ul class="menu">
        <li class="leaf first"><a href="/drupal/art/2010" class="active">2010</a></li>
        <li class="leaf last"><a href="/drupal/art/firesign">Firesign 10</a></li>
     </ul>
    </li>
    <li class="parent leaf"><a href="/drupal/store"><span>Store</span></a></li>
    <li class="parent leaf"><a href="/drupal/music">Music</a></li>
    <li class="parent leaf"><a href="/drupal/news">News</a></li>
    <li class="parent leaf last"><a href="/drupal/contact" title="Contact">Contact</a></li>
</ul>

I am trying this in template.php, but I can't seem to target all the parent li's without submenus.

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';

  $class .= ' ' . preg_replace('/[^a-zA-Z0-9]/', '', strtolower(strip_tags($link)));

  // something like this would work, but not all of them have a $menu
  if($menu == ''){ 
 $liClass = 'sub';
  }
  else {
 $liClass = 'parent';  
}
  return '<li class="'.$liClass.' '. $class .'">'. $link . $menu ."</li>\n";
}

Answer 4

thx, it really helped me!

Answer 5

How do I update link(url) in menu based on the content on the node?