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

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

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

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

Иногда может возникнуть необходимость добавить этот класс наружному элементу <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'] == '&lt;front&gt;' &amp;&amp; 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 '&lt;li' . drupal_attributes($element['#attributes']) . '&gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
}

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

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

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

Тэги: 

There are 2 Comments

а можно вместо <span style=

а можно вместо <span style="color:#ff0000;"> if задать класс для спана?

Конечно можно

Конечно можно прописать класс. Здесь цвет я всавлял для наглядности примера.

Делись своим опытом и знаниями, ибо в могиле они тебе вряд-ли пригодятся.

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <s> <u> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <hr> <dd> <sub> <sup>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Строки и параграфы переносятся автоматически.
CAPTCHA
Защита от СПАМ ботов. Подтвердите, пожалуйста, что вы человек.
4 + 6 =
Решите эту простую математическую задачу и введите результат. Например, для 1+3, введите 4.