Drupal Adding Span inside A tags in Nice Menus

Question

I am trying to add drop down menus to a drupal theme which uses text sliding door CSS rounding.

The current version uses a primary links injection of the span into the a tags, which works fine. But doesn't support drop down menus.

Working code:

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

In the template with a template.php file addition:

<?php
// function for injecting spans inside anchors which we need for the theme's rounded corner background images
function strands_guybrush_links($links, $attributes =  array('class' => 'links')) {
  $output = '';
  if (count($links) > 0) {
    $output = '<ul'. drupal_attributes($attributes) .'>';

    $num_links = count($links);
    $i = 1;

    foreach ($links as $key => $link) {
      $class = $key;

      // Add first, last and active classes to the list of links to help out themers.
      if ($i == 1) {
        $class .= ' first';
      }
      if ($i == $num_links) {
        $class .= ' last';
      }
      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))) {
        $class .= ' active';
      }
      $output .= '<li'. drupal_attributes(array('class' => $class)) .'>';

      if (isset($link['href'])) {
        $link['title'] = '<span class="link">' . check_plain($link['title']) . '</span>';
        $link['html'] = TRUE;      
        // Pass in $link as $options, they share the same keys.
        $output .= l($link['title'], $link['href'], $link);        
      }
      else if (!empty($link['title'])) {
        // Some links are actually not links, but we wrap these in <span> for adding title and class attributes
        if (empty($link['html'])) {
          $link['title'] = check_plain($link['title']);
        }
        $span_attributes = '';
        if (isset($link['attributes'])) {
          $span_attributes = drupal_attributes($link['attributes']);
        }
        $output .= '<span'. $span_attributes .'>'. $link['title'] .'</span>';
      }

      $i++;
      $output .= "</li>\n";
    }

    $output .= '</ul>';
  }
  return $output;
}
?>

So I have added the Nice Menu module which works well and allows the drop down menu functions for my navigation which is now addressed from the template using:

<?php   print theme_nice_menu_primary_links() ?>

The issue is that the a tags need to have spans inside to allow for the selected state markup. I have tried every angle I could find to edit the drupal function menu_item_link which is used by nice menus to build the links.

E.g. I looked at the drupal forum for two days and no joy.

The lines in the module that build the links are:

function theme_nice_menu_build($menu) {
  $output = '';
  // Find the active trail and pull out the menus ids.

  menu_set_active_menu_name('primary-links');
  $trail = menu_get_active_trail('primary-links');
  foreach ($trail as $item) {
    $trail_ids[] = $item['mlid'];
  }

  foreach ($menu as $menu_item) {
    $mlid = $menu_item['link']['mlid'];
    // Check to see if it is a visible menu item.
    if ($menu_item['link']['hidden'] == 0) {
      // Build class name based on menu path
      // e.g. to give each menu item individual style.
      // Strip funny symbols.
      $clean_path = str_replace(array('http://', '<', '>', '&', '=', '?', ':'), '', $menu_item['link']['href']);
      // Convert slashes to dashes.
      $clean_path = str_replace('/', '-', $clean_path);
      $class = 'menu-path-'. $clean_path;
      $class .= in_array($mlid, $trail_ids) ? ' active' : '';  
      // If it has children build a nice little tree under it.
      if ((!empty($menu_item['link']['has_children'])) && (!empty($menu_item['below']))) {
        // Keep passing children into the function 'til we get them all.
        $children = theme('nice_menu_build', $menu_item['below']);
        // Set the class to parent only of children are displayed.
        $class .= $children ? ' menuparent ' : '';
        // Add an expanded class for items in the menu trail.
        $output .= '<li id="menu-'. $mlid .'" class="'. $class .'">'. theme('menu_item_link', $menu_item['link']);
        // Build the child UL only if children are displayed for the user.
        if ($children) {
          $output .= '<ul>';
          $output .= $children;
          $output .= "</ul>\n";
        }  
        $output .= "</li>\n";
      }  
      else {
        $output .= '<li id="menu-'. $mlid .'" class="'. $class .'">'. theme('menu_item_link', $menu_item['link']) .'</li>'."\n";
      }  
    }  
  }
  return $output;
}

As you can see the $output uses menu_item_link to parse the array into links and to added the class of active to the selected navigation link.

The question is how do I add a span inside the a tags OR how do I wrap the a tags with a span that has the active class to style the sliding door links?

Answer 1

If you want to wrap the a tags with a span, you can overwrite the theme_nice_menu_build and add your span to the output. If you want to inside the a tag you need to overwrite the menu_item_link.

You can overwrite a theme funciton by creation a function call your_theme_name_function_name and Drupal will use that function to render the markup instead of the default one. That way you can alter the markup any way you want. This function should be in your theme's template.php file.

A good way to start is to copy the function you want to overwrite and just alter to your likings.

A lot has happened since Drupal 4.7, I don't hope you use that. It's quite easy to insert span tags:

function your_theme_name_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }
  $link['localized_options']['html'] = TRUE;
  return l('<span>' . $link['title'] . '</span>', $link['href'], $link['localized_options']);
}

I tested this and it works just fine.