Drupal 7: Как присвоить CSS класс "active" элементу меню <LI>

Drupal 7, к HTML элементу <a>, активного элемента меню, то-есть пункту меню, ссылка которого совпадает с текущим адресом в адресной строке браузера, добавляет CSS Класс "active". В большинстве случаев этого достаточно для того, чтоб изменить цвет текста элемента меню при наведении мыши, но если потребуется добавление CSS эффектов ко всему <LI> элементу, для этого потребуется переопределить функцию theme_menu_link ядра Drupal 7.

Из приведенного кода ниже видно сгенерированный HTML код исходной функции theme_menu_link, в котором атрибут "active" присваивается элементу <a>:

<ul class="menu clearfix sf-menu">
    <li class="first leaf">
        <a href="/" title="" class="active">Главная</a>
    </li>
    <li class="leaf"><a href="">О компании</a></li>
    ...
    <li class="expanded"><a href="" title="">Услуги</a></li>
    <li class="last leaf"><a href="/node/4">Контакты</a></li>
</ul>

Иногда может возникнуть необходимость добавить этот класс наружному элементу <li>, например если нужно изменть фон всего меню при наведении курсора мыши.

Для того, чтоб решить поставленную задачу, переопределяем функцию theme_menu_link, исходный код которой находится в файле /includes/menu.inc. Для этого копируем полностью текст функции и сохраняем в файле template.php используемой темы (исходный файл не изменяем, только копируем!). Имя устанавливается в соответствии с именем темы: themename_menu_link (например для темы pet_clinic функция будет называться pet_clinic_menu_link).

Вот как выглядит модифицированная функция theme_menu_link:

/**
 * Override theme_menu_link(array $variables) function
 *
 * 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 pet_clinic_menu_link(array $variables) {
  //$links = $variables['links'];
  $element = $variables['element'];
  $sub_menu = '';

 // Добавляем следующие 4 строчки
  if ($variables['element']['#href'] == current_path() ||
          ($variables['element']['#href'] == '<front>' && drupal_is_front_page())) {
    $element['#attributes']['class'][] = 'menu-active';
 }
 // Конец добавленного кода 

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

После сохранения изменений сгенерированный код меню будет выглядеть так:

<ul class="menu clearfix sf-menu">
    <li class="first leaf menu-active"><a href="/" title="" class="active">Главная</a></li>
    <li class="leaf"><a href="">О компании</a></li>
    ...
</ul>

Вот и все. Успехов в освоении Drupal!