Drupal 6 menu output for Twitter's Bootstrap

Question

I've been driving myself crazy trying to manipulate the output of my primary menu to be compatible with Twitter Bootstrap's drop-down menu and I'm wondering if anyone out there has done something similar or has the know-how to help me out and save me from losing further sleep on this. Just as example of Bootstraps menu I've got something that looks like this:

<ul class="nav">
    <li class="active"><a href="/">Home</a></li>
    <li class=""><a href="/news">News</a></li>
    <li class=""><a href="/sports">Sports</a></li>
    <li class=""><a href="/opinion">Opinion</a></li>
    <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Special Sections <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="/special/welcome">Welcome</a></li>
          <li><a href="/special/orientation">Orientation</a></li>
          <li><a href="/special/housing">Housing</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Media <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="/media/video">Video</a></li>
          <li><a href="/media/photo">Photo</a></li>
        </ul>
    </li>
</ul>

I've tried using the theme hook:

<?php 
    print theme('links', $primary_links, array('id' => 'nav', 'class' => 'nav links primary-links')); 
?>

Along with phptemplate_menu_item and phptemplate_menu_item_link functions in template.php, but so far I've only been able to successfully duplicate the top level of the menu.

As a reference: Drupal Override Custom Menu Template

Thanks in advance!

Answer 1

I was able to do this by calling a custom menu_tree function:

print bootstrap_menu_tree('primary-links');

with this in my theme's template.php:

function bootstrap_menu_tree($menu_name = 'navigation') {
  static $menu_output = array();

  if (!isset($menu_output[$menu_name])) {
    $tree = menu_tree_page_data($menu_name);
    $menu_output[$menu_name] = bootstrap_menu_tree_output($tree);
  }
  return $menu_output[$menu_name];
}

function bootstrap_menu_tree_output($tree, $dropdown_menu = false) {
  $output = '';
  $items = array();

  // Pull out just the menu items we are going to render so that we
  // get an accurate count for the first/last classes.
  foreach ($tree as $data) {
    if (!$data['link']['hidden']) {
      $items[] = $data;
    }
  }

  $num_items = count($items);
  foreach ($items as $i => $data) {
    $extra_class = array();
    if ($i == 0) {
      $extra_class[] = 'first';
    }
    if ($i == $num_items - 1) {
      $extra_class[] = 'last';
    }
    $extra_class = implode(' ', $extra_class);
    if ($data['below']) {
      $link = theme('menu_item_link', $data['link'], true);
      $output .= theme('menu_item', $link, $data['link']['has_children'], bootstrap_menu_tree_output($data['below'], true), $data['link']['in_active_trail'], $extra_class);
    }
    else {
      $link = theme('menu_item_link', $data['link']);
      $output .= theme('menu_item', $link, $data['link']['has_children'], '', $data['link']['in_active_trail'], $extra_class);
    }
  }
  return $output ? theme('menu_tree', $output, $dropdown_menu) : '';
}





// theme_menu_tree()
function phptemplate_menu_tree($tree, $dropdown_menu = false) {
  $class = 'nav';
  if($dropdown_menu) $class = 'dropdown-menu';
  return '<ul class="'.$class.'">'. $tree .'</ul>';
}

// theme_menu_item()
function phptemplate_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
  $class = ($menu ? 'dropdown' : ($has_children ? 'dropdown' : ''));
  if (!empty($extra_class)) {
    $class .= ' '. $extra_class;
  }
  if ($in_active_trail) {
    $class .= ' active-trail';
  }
  return '<li class="'. $class .'">'. $link . $menu ."</li>\n";
}

function phptemplate_menu_item_link($link, $dropdown_toggle = false) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }

  if($dropdown_toggle) {
    // add class
    if (isset($link['localized_options']['attributes']['class'])) {
      $link['localized_options']['attributes']['class'] .= ' dropdown-toggle';
    }
    else {
      $link['localized_options']['attributes']['class'] = 'dropdown-toggle';
    }
    // add toggle
    $link['localized_options']['attributes']['data-toggle'] = 'dropdown';
    // add carat
    $link['title'] .= '<b class="caret"></b>';
    $link['localized_options']['html'] = true;
  }

  return l($link['title'], $link['href'], $link['localized_options']);
}