Add ID to menu items in drupal main menu

Question

Attached to my template, that I received from my slicer, there was a javascript file for coloring the menu items. Now I need to convert the template to a Drupal template. The javascript is based on the fact that every menu item has an id, according to the order of the items. In Drupal, the menu items only have classes (menu-341, menu-342 etc.,). I know I can adjust the javascript, so it gets the menu items by class, but it actually isn't possible because then I need to completely upset the whole file, what I try to prevent.

So can I add an ID to all my main menu items, something like 'menu-item-1', 'menu-item-2', etc.? Should I do this in template.tpl.php, or directly change the output in page.tpl.php?

Thanks for help.

EDIT: I'm desperate because I just don't know how to fix this. Is there another way to color my menu items? The script I'm using picks the menu items on their ascending id (custom-menu-item-id-x), and gives them a background, out of an array, wich associates with the 'x' of the ID. Four colors: color 1 for item 1, color 2 for item 2, color 1 for item 5 etc..... Isn't there another way to fix this? Couldn't I let jQuery pick them automatically in the ascending order (first item it encounters gets the first background, second item second background etc.)? Please come up with ideas. I tried everything, in my opinion.

This is my current script:

//Sequence of the background colors from the menu items, from left to right.
var backgrounds = ["blue", "green", "pink", "purple"];

//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
jQuery(document).ready(function MenuColor($){
    for (var i = 0; i <= 10 ; i++) {
        document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = (function(valueOfI){ return function() {
        this.style.background = "url('images/" +  backgrounds[(valueOfI % backgrounds.length)] + ".jpg')";
        }; })(i);
        var ActiveLi = $('.active').attr('id');
        if("custom-menu-item-id-" + (i + 1) != ActiveLi) {
            document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
                this.style.background = 'none'; 
            }
        }
    }
});

Answer 1

A quick search provides several options including what looks like an answer. And yeah - template functions are 100% designed for this sort of thing. :)

EDIT - No problem, but your answer is actually there in the comment by RichTheGeek. He's linked the new D7 function, and in the comment thread for that is an example which adds classes to the menu items based on their title. It's not a brilliant example as using preg_replace is a "heavy" way of doing it, but I don't see why this wouldn't work. all I did was swap "class" for "id" on line 11.

Don't forget to replace "yourtheme" with the actual system name of the theme you're using.

  function yourtheme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $name_id = strtolower(strip_tags($element['#title']));
// remove colons and anything past colons
  if (strpos($name_id, ':')) $name_id = substr ($name_id, 0, strpos($name_id, ':'));
//Preserve alphanumerics, everything else goes away
  $pattern = '/[^a-z]+/ ';
  $name_id = preg_replace($pattern, '', $name_id);
  $element['#attributes']['id'][] = 'menu-' . $element['#original_link']['mlid'] . ' '.$name_id;
  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";
}
?>

Answer 2

But I managed it finally by myself. First, I pasted this piece of code (copied from the Bartik page.tpl.php template) in my page.tpl.php:

<?php if ($main_menu): ?>
  <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'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      ),
    )); ?>
  </div> <!-- /#main-menu -->
<?php endif; ?>

This placed the 'main menu' at the right place. BUT, everything I changed in menu.inc, or in template.php, didn't apply to it. So, instead of placing that code there, I placed the BLOCK 'main menu' in the corresponding region , and suddenly I was able to change everything.

So in my template.php I added this function, wich wrote the ID to the items.

<?php
/**
 * Returns HTML for a menu link and submenu.
 *
 * @param $variables
 *   An associative array containing:
 *   - element: Structured array data for a menu link.
 *
 * @ingroup themeable
 */
function exofes_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  static $item_id = 0;
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);  
  return '<li id="custom-menu-item-id-' . (++$item_id) . '"' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
?>

AND THAT WORKED :D!

Answer 3

function THEME_preprocess_page(&$vars) {
  $menu = menu_navigation_links('menu-your-custom-menu-name');
  $vars['custom_menu'] = theme('links__menu_your_custom_menu_name', array('links' => $menu));
}