Добавить.активный класс в ссылку меню при нажатии на другую ссылку меню

Question

Добавить.активный класс в ссылку меню при нажатии на другую ссылку меню

У меня есть следующий сценарий: Drupal 8.5.6, с подтемой начальной загрузки. Есть 2 меню (я буду называть их главным меню и дополнительным меню).

Ссылки в главном меню являются географическими областями, мне удалось добавить класс .active в ссылку на основе URL-адреса с помощью этого ответа: https://drupal.stackexchange.com/a/191861/60589 с функцией предварительной обработки и настройкой кода ветки.

Ссылки во вторичном меню связаны с каждым одна из ссылок в главном меню, поэтому, когда я нажимаю Область 1 в главном меню, на этой странице появится пользовательское дополнительное меню.

Проблема: Я хочу, чтобы ссылка на главное меню оставалась высокой, когда я нажимаю на ссылку дополнительного меню URL-адреса выглядят следующим образом:

Mysite/areas/area1==> Ссылка Area1 в главном меню получает активный класс

Mysite/области/area1/другая ссылка==> Ссылки во вторичном меню имеют такую структуру, я хочу ссылку Area1 в главном меню, чтобы сохранить класс .active.

1

navigation theming 8 bootstrap-theme

Author: Jorge Montoya, 2018-08-22

Source

1 answers

score 3 · Accepted Answer

Приведенное решение выглядит немного ошибочным, так как оно заменяет все потенциально существующие классы пунктов меню. Но что делает его неподходящим для вашего варианта использования, так это то, что он предназначен для добавления класса active только в том случае, если текущий путь совпадает с URL-адресом ссылки меню.

Вместо этого вы ищете "активный след" пунктов меню. Это флаг, установленный модулем меню для каждого пункта меню, найденного при переходе по дереву меню вверх, начиная с текущего активного пункта вверх в корень меню.

Имея под рукой эту информацию, проверьте шаблон меню по умолчанию . Он имеет свойство, специфичное для пункта меню in_active_trail:

In_active_trail: ВЕРНО, если ссылка находится в активном следе.

Таким образом, вы можете легко добавить класс active в ваш текущий активный пункт меню и все его родительские элементы, используя следующее в вашей теме menu.html.twig:

{%
  set link_classes = [
    item.in_active_trail ? 'active',
  ]
%}
{{ link(item.title, item.url, {'class': link_classes}) }}

Более полный пример навигации начальной загрузки 4 с menu.html.twig:

{#
/**
 * @file
 * Theme override to display a Bootstrap 4 menu.
 */
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('nav') }}>
    {% else %}
      <ul class="menu">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'nav-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {%
          set link_classes = [
            'nav-link',
            item.in_active_trail ? 'active',
          ]
        %}
        {{ link(item.title, item.url, {'class': link_classes}) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}