By depe86 on

Hi!

How can I add a simple 'span'-tag to all my menu items in the main_menu in my theme?

I would like this layou:

ul
li a span Länk /span /a /li
/ul

Thanks!

⋅ Categories: Drupal 7.x

Comments

pbarnett’s picture

pbarnett commented

You could add the following code to your theme's template.php (if the function doesn't already exist) -

/**
 * Implements theme_menu_item_link()
 */
function yourthemename_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }

  $link['title'] = '<span class="tab">' . check_plain($link['title']) . '</span>';
  $link['localized_options']['html'] = TRUE;

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

This is a slight modification of the code that's supplied with the Zen theme - remember to replace yourthemename with the name of your theme!

depe86’s picture

depe86 commented

Thank you for your reply pbarnett!
But that didn´t result in a span-tag. Wrote the code in my theme-template, changed the function name my theme name.

I cleared my cache in site 'Configuration'.
Anything more to do before if works?

Thanks again!

pbarnett’s picture

pbarnett commented

Did you clear the menu cache? I always install the Administration menu module as it makes clearing specific caches much simpler...

depe86’s picture

depe86 commented

I cleared the cache under Configuration -> Performance -> Clear all cache
So the menu cache should been cleared to, right?

I´ve installed the administration menu just so I could clear the menu cache, but couldnt find that operation anywhere...

Your the best Pete thats trying to help me!
Thanks!!!

pbarnett’s picture

pbarnett commented

It's at the top left, under 'Home'.

I checked the code on a test installation, and it's definitely adding a span :-

<li class="expanded active-trail">
  <a title="Control how your site looks and feels." href="/admin/build">
    <span class="tab">Site building</span>
  </a>
depe86’s picture

depe86 commented

Hi again!

I cleared all cache in the administration menu, but still no luck.
Run cron, update.php, change theme and then back again.

I´m using the regular main_menu (primary_menu in Drupal 6).

Im not a Drupal 7 fan :(

Should the theme-settings.php be empty?
My theme automaticly 'read in' the template.php?

Thanks again, your so helpful Pete!

pbarnett’s picture

pbarnett commented

Oh dear!

I hadn't noticed the D7 tag - theme_menu_item_link doesn't exist in D6 :-(

The corresponding function in D7 is

function theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

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

so you could try 

function yourtheme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  $element['#localized_options']['html'] = TRUE;
  $linktext = '<span class="your_class">' . $element['#title'] . '</span>';

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

see also the l() function.

depe86’s picture

depe86 commented

Now it finally worked.
The code in my template.php, refreshed the cashe under "Performance".

Thank you Pete for all your help!
Saved me a lots of time!!

/Daniel

pbarnett’s picture

pbarnett commented

Excellent! I hadn't actually tested the code, so I'm pleased that it worked...

jive01’s picture

jive01 commented

Confirmed. It doesn't seem to work for the main menu. (primary and secondary links). How do you modify this to do so?

qstyler’s picture

qstyler commented

Why does it work with some of block menus only, but not with my primary menu?

timothymahoney’s picture

timothymahoney commented

I'm having some trouble with this as well when trying to format my main menu.

jeremyvanlanda’s picture

jeremyvanlanda commented

This is what I ended up doing.

template.php:

function YOURTHEME_preprocess_page(&$variables) {
global $theme_path;
	$variables['menuone'] = menu_navigation_links('menu-one');  //if you have custom menus
	$variables['menutwo'] = menu_navigation_links('menu-two');  //if you have custom menus

foreach ($variables['MenuOne'] as $key => $value) {       //custom menu 1
    $variables['menuone'][$key]['html'] = TRUE;
    $variables['menuone'][$key]['title'] = '<span>'. $variables['menuone'][$key]['title'] .'</span>';
}
foreach ($variables['MenuTwo'] as $key => $value) {           //custom menu 2
    $variables['menutwo'][$key]['html'] = TRUE;
    $variables['menutwo'][$key]['title'] = '<span>'. $variables['menutwo'][$key]['title'] .'</span>';
}  
foreach ($variables['main_menu'] as $key => $value) {      //main menu
    $variables['main_menu'][$key]['html'] = TRUE;
    $variables['main_menu'][$key]['title'] = '<span>'. $variables['main_menu'][$key]['title'] .'</span>';
  }
}

And in page.tpl.php:

<div id="menu-one" class="navigation">
        <?php 
		print theme('links__system_main_menu', array(
          'links' => $menuone,
          'attributes' => array(
            'id' => 'custom-menu-links',
            'class' => array('links', 'clearfix'),
          )
        )); ?>
      </div> 

  <div id="main-menu" class="navigation">
        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu-links',
            'class' => array('links', 'clearfix'),
          )
        )); ?>
</div>

My custom menus were actually replacing my menu main depending on url.

bish.88’s picture

bish.88 commented

Hi.

I adapted what you did above to suit my design, and it worked perfectly.

I'm wondering though if it's possible to assign a class to, in this case, the span, that varies depending on the link.

In the template.php file I have this:

function queue_preprocess_page(&$variables) {

foreach ($variables['main_menu'] as $key => $value) {      //main menu
    $variables['main_menu'][$key]['html'] = TRUE;
    $variables['main_menu'][$key]['title'] = '<div id="topnavblip" class="HERE LIES THE PROBLEM!"></div>'. $variables['main_menu'][$key]['title'] .'<div id="bottomnavblip" class="tabedge"></div></';
  }
}

I altered the above solution to include a small div just before and just after each link - and I have no problem with this, it's all coming out just fine.

The point of the divs is that when the link is hovered over, it changes colour. However, I want each link to change to a different colour; e.g. Link A when hovered the div's background changes to red ... Link B when hovered the div's background changes to yellow.

I know all the CSS to do that, but what I don't know how to do is to assign a class to div id="topnavblip" that will correspond with each link. I know that drupal assigns each link a class, such as "menu-218" and "menu-219". I figured I could put a class in my CSS called menu-218 and menu-219 and assign the relevant properties to get the div changing colour (for instance menu-218 to red and menu-219 to yellow), but I don't know how to coordinate this with the div in the template.php file.

Hope this makes some sense to somebody! Would appreciate any help.

Thanks.