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

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!