添加ID到drupal主菜單中的菜單項

Question

附加到我的模板，我從我的切片機收到，有一個JavaScript文件爲菜單項着色。 現在我需要將模板轉換爲Drupal模板。 JavaScript是基於這樣的事實，即每個菜單項都有一個id，根據項目的順序。 在Drupal中，菜單項只有類（菜單341，菜單342等）。我知道我可以調整javascript，所以它按類獲取菜單項，但實際上這是不可能的，因爲然後我需要徹底打亂整個文件，我試圖阻止。

那麼我可以爲我的所有主菜單項添加一個ID，例如'menu-item-1'，'menu-item-2'等。 我應該在template.tpl.php中執行此操作，還是直接更改page.tpl.php中的輸出？

感謝您的幫助。

編輯： 我很絕望，因爲我只是不知道如何解決這個問題。是否有另一種方法爲我的菜單項着色？ 我正在使用的腳本在它們的升序id（custom-menu-item-id-x）中選擇菜單項，並給它們一個背景，從數組中取出，並與ID的'x'關聯。四種顏色：第1項的顏色1，第2項的顏色2，第5項的顏色1等...... 是否有另一種解決方法？我不能讓jQuery按升序自動選擇它們（第一個項目遇到第一個背景，第二個項目第二個背景等）？請提出一些想法。在我看來，我嘗試了一切。

這是我當前的腳本：

//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

但是我終於自己管理了它。 首先，我在page.tpl.php中粘貼這段代碼（從Bartik 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; ?> 

此放置在「主菜單」在正確的地方。 但是，我在menu.inc或template.php中更改的所有內容都不適用於它。 因此，我沒有在那裏放置代碼，而是將BLOCK的「主菜單」放在相應的區域，突然之間我能夠改變一切。

所以在我的template.php中，我添加了這個函數，這個ID寫入了這些條目。

<?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"; 
} 
?> 

而且工作：D！

Answer 2

A quick search提供了幾個選項，包括什麼樣子的answer。是的 - 模板功能是100％爲這種事情設計的。 :)

編輯 - 沒問題，但你的答案實際上是在RichTheGeek的評論中。他將新的D7函數連接起來，並且在註釋線程中，這是一個根據標題向菜單項添加類的示例。這不是一個很好的例子，因爲使用preg_replace是一種「沉重的」做法，但我不明白爲什麼這不起作用。我所做的只是在第11行將「class」換成「id」。

不要忘記用您正在使用的主題的實際系統名稱替換「yourtheme」。

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 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)); 
}