Adding <span> tags around each primary item in Drupal

Question

I'd like my primary links in Drupal to look like this in code:

<a class="active" title="Go to the Foo Homepage" href="/"><span>Home</span></a>

Rather than:

<a class="active" title="Go to the Foo Homepage" href="/">Home</a>

So I can then style the span separately from the a.

(I know that sounds like a slightly strange thing to do, but it's to do with working around IE's lack of border-radius support coupled with the inability to set 2 background images.)

So do you know where & how I get Drupal to insert these tags in all my primary links?

Answer 1

I'm guessing, somewhere in your page.tpl.php, you have something like this to display the primary menu :

print theme('links', $primary_links, array('class' => 'links primary-links'));

One solution (might not be the cleanest one -- but should work) would be to iterate on the elements of $primary_links, to, for each one, :

• activate HTML mode
• wrap the title with <span> and </span>

If your menu has only one level, I suppose this would do :

foreach ($primary_links as & $link) {
  $link['html'] = true;
  $link['title'] = '<span>' . $link['title'] . '</span>';
}

And, after that, you can call theme like you're already doing now.

With that, you should get <span> tags arround the text of the link, without having them injected in the title's attribute of the <a> tags.

I you have more levels in your menu, you will have to iterate farther down ; either with two imbricated loops, or with some kind of recursion if you don't know the depth of your menus.
(I'll let you have fun with that ; what I said should be enough to get you started ;-) )

As a sidenote, this could probably done somewhere in template.php too... Might be a better place ; but I'll let you decide which solution you prefer...

Have fun !

Answer 2

This should help http://drupal.org/node/221382

Scroll down to this comment for the final solution http://drupal.org/node/221382#comment-755469. There are issues with the html output which are resolved there.

Answer 3

For the record, in the end I just used the menu_html module and entered the menu items as <span>Menu Item 1</span> in the relevant dialogues.

In fact I ended up with <span><span>Menu Item Expanded</span></span> in one of them because it was expanded and already had a background image set. It now has 3!

At least my curved corners on my tabs are working now in IE. Another time that IE soaks up 5/6 hours just because it doesn't support CSS properly!